实现元素或图片的上下、左右居中的三种方法

效果图如下：

方法一：利用vertical-align属性实现图片上下居中

先设置父元素样式text-align: center，实现图片左右居中，给图片添加一个同级的span标签，设置宽度为零，高度100%，两者都设置display: inline-block; vertical-align: middle，即可实现图片上下居中，具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片上下左右居中</title>

    <style>

.box{

width: 400px;

height: 300px;

border: 1px #000 solid;

margin: 40px auto;

text-align: center;

}

.box img{

display: inline-block;

vertical-align: middle;

}

.box span{

width: 0;

height: 100%;

display: inline-block;

vertical-align: middle;

}

</style>

</head>

<body>

   　　<div class="box"></div>

<span></span>

</div>

</body>

</html>

方法二：使用弹性盒实现，这种方法比上一种方法好操作

只需要给父元素添加display:flex（弹性盒），再给子元素设置margin: auto即可，具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片上下左右居中</title>

    <style>

.box{

width: 400px;

height: 300px;

border: 1px #000 solid;

margin: 40px auto;

display: flex;

}

.box img{

margin: auto;

}

</style>

</head>

<body>

　　<div class="box"></div>

</body>

</html>

方法三：使用定位使子元素在父元素内部垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素上下左右居中</title>
    <style>
        .box{
            width: 400px;
            height: 300px;
            border: 1px #000 solid;
            margin: 40px auto;
            background-color: lightskyblue;
            position: relative;
        }
        .box p{            
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class=""></p>
     </div>
</body>
</html>

如果感觉对自己有帮助，麻烦点一下关注，会一直和大家分享知识的，谢谢！！！

html+css实现图片或元素的垂直、水平同时居中的多种方法的更多相关文章

  1. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  2. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  3. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  4. CSS垂直水平完全居中手册

    水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...

  5. 实现CSS样式垂直水平完全居中

    1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...

  6. CSS 布局实例系列（一）总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  7. 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...

  8. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  9. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

随机推荐

  1. 前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...

  2. Tomcat8优化--Apache JMeter测试

    一.部署测试java web项目(压力测试环境搭建) 1.mysql环境 #切换到mysql目录 cd /usr/local/mysql #查看mysql环境 rpm -qa | grep -i my ...

  3. jquery 获取css3 transform 值

    最近写了个旋转,有要求获取transform值.当看到console.log($("#id").css("transform"))的值的时候,我的内心是崩溃的 ...

  4. weex 和 appcan 的个人理解

    appcan是浏览器技术,前端代码运行在webview上,而weex是原生引擎渲染,说白了就是把H5翻译成原生. weex的官网上说,在开发weex页面就像开发普通网页一样,在渲染weex页面时和原生 ...

  5. 求你了，别再说Java对象都是在堆内存上分配空间的了！

    Java作为一种面向对象的,跨平台语言,其对象.内存等一直是比较难的知识点,所以,即使是一个Java的初学者,也一定或多或少的对JVM有一些了解.可以说,关于JVM的相关知识,基本是每个Java开发者 ...

  6. C++ 顺序表练习

    #include <stdio.h> #include <stdlib.h> #include <string.h> struct Array //定义一个数据存储 ...

  7. 【Elasticsearch】查询并删除匹配文档之_delete_by_query

    思路:先查询确认,后精准删除 假设我想删除title是"小明今晚真的不加班"这条记录,先查看一下现有的记录: (不加班不好吗?为什么要删除呢?) tips:可以使用match_ph ...

  8. java集合-把商品放入集合中调用（新手）

    //创建的一个包名. package qige; //导入的一个包.import java.util.*; //定义一个类.public class Ipcs { //公共静态的主方法. public ...

  9. Callable的Future模式

    一.线程实现方式 1.继承Thread类 2.实现Runnable接口 3.线程池 4.Callable 二.无论使用继承Thread类还是实现Runnable接口,还是使用线程池都没有办法解决2个问 ...

  10. video.js 视频自动全屏播放

    1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...