1.flex布局
 

/*你的父容器*/
 .box{
        display:flex;
        align-items: center;//子元素垂直居中
        justify-content: center;//子元素水平居中
}
2.table布局
 

 .box{
        display:table;
       vertical-alian:middle;
}
转自:https://segmentfault.com/q/1010000010967267

 

 
 

 

图片在div中默认是和基线对齐（从上到下依次是顶线（top），中线（middle），基线（baseline），底线（bottom））
 方法：
 给div设定text-align:center;可使图片水平居中，再给图片img设定 vertical-align:middle;即可达到垂直居中（切记，是给图片加，不是div，很多人容易搞错）
 还有一个方法，就是用table布局，td默认是水平方向居左的，但是垂直方向是居中的，所以你套一个table后再插入图片的话，也能很好的达到垂直居中

方法一：

 该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。

 HTML代码

 <div id="box">

 <span><img src="images/demo.jpg" alt="" /></span>

 
</div>
 CSS代码

 <style type="text/css">

 #box{

     width:500px;height:400px;

     display:table;

     text-align:center;

     border:1px solid #d3d3d3;background:#fff;

 }

 #box span{

     display:table-cell;

     vertical-align:middle;

 }

 #box img{

     border:1px solid #ccc;

 }

 </style>

 <!--[if lte IE 7]>

 <style type="text/css">

 #box{

     position:relative;

     overflow:hidden;

 }

 #box span{

     position:absolute;

     left:50%;top:50%;

 }

 #box img{

     position:relative;

     left:-50%;top:-50%;

 }

 </style>

 <![endif]-->

 

 方法二：

 方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。

 CSS代码

 <style type="text/css">

 #box{

     width:500px;height:400px;

     overflow:hidden;

     position:relative;

     display:table-cell;

     text-align:center;

     vertical-align:middle;

     border:1px solid #d3d3d3;background:#fff;

 }

 #box span{

     position:static;

     *position:absolute; /*针对IE6/7的Hack*/

     top:50%; /*针对IE6/7的Hack*/

 }

 #box img {

     position:static;

     *position:relative; /*针对IE6/7的Hack*/

     top:-50%;left:-50%; /*针对IE6/7的Hack*/

     border:1px solid #ccc;

 }

 </style>

 该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。

 

 

 方法三：

 标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。

 HTML代码

 <div id="box">

     <i></i><img src="images/demo.jpg" alt="" />

 </div>

 CSS代码

 <style type="text/css">

 #box{

 width:500px;height:400px;

 display:table-cell;

 text-align:center;

 vertical-align:middle;

 border:1px solid #d3d3d3;background:#fff;

 }

 #box img{

 border:1px solid #ccc;

 }

 </style>

 <!--[if IE]>

 <style type="text/css">

 #box i {

     display:inline-block;

     height:100%;

     vertical-align:middle

     }

 #box img {

     vertical-align:middle

     }

 </style>

 
<![endif]-->
 

 
 方法四：

 在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现，IE6/IE7使用了CSS表达式来实现兼容。

 HTML代码

 <div id="box">

     <p><img src="images/demo.jpg" alt="" /></p>

 </div>

 CSS代码

 #box{

     width:500px;height:400px;

     text-align:center;

     border:1px solid #d3d3d3;background:#fff;

 }

 #box p{

     width:500px;height:400px;

     line-height:400px; /* 行高等于高度 */

 }

   

 /* 兼容标准浏览器 */

 #box p:before{

     content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关，尽可能的节省字符 */

     margin-left:-5px; font-size:10px; /* 修复居中的小BUG */

     visibility:hidden; /*设置成隐藏元素*/

 }

   

 #box p img{

     *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */

     vertical-align:middle;

     border:1px solid #ccc;

 }

 使用:beforr这个方法对于标准浏览器来说比较给力，也没发现有副作用，但是对于IE6/IE7，如果对性能要求较高的话CSS表达式的方法要慎用。

 

 

 方法五：

 该方法针对IE6/IE7，将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中，标准浏览器还是使用上面的方法来实现兼容，并且结构也是比较优雅。

 HTML代码

 <div id="box">

     <img src="images/demo.jpg" alt="" />

 </div>

 CSS代码

 #box{

     width:500px;height:400px;

     text-align:center;

     border:1px solid #d3d3d3;background:#fff;

     

     /* 兼容标准浏览器 */

     display: table-cell;

  vertical-align:middle;

     

     /* 兼容IE6/IE7 */

     *display:block;

     *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */

     *font-family:Arial; /* 防止非utf-8引起的hack失效问题，如gbk编码 */

 }

  

 #box img{

     vertical-align:middle;

 }

 设置字体大小的方法感觉比较怪异，也没有看到一个合理的解释，只知道图片元素有一些不同于其他元素的特性，但是对于IE6/IE7来说，这个方法还是比较给力的。

 思考：很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中，也就是div来模拟table。

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。
 水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法
 
下面说两种在屏幕正中（水平居中+垂直居中）的方法
 放上示范的html代码：
 
<body>
	<div class="main">
		<h1>MAIN</h1>
	</div>
</body>
 
方法一：
 
div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
 
.main{
	text-align: center; /*让div内部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
 
效果如图：
 
 
方法二：
 仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
 
 .main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
 
方法三：
 对于水平居中，可以使用最简单的<center>标签，不过已经过时了，用法如下：
 
<p><center>123</center></p>
 
这个<center>标签就是相对于<p>标签里的文字，可以使其居中。
 
由于center标签已经过时了，所以正规一点的话还是不建议使用的，可以使用如下的方式代替：
 
<p style="text-align:center;">123</p>
 

 
 

 欢迎大家加入QQ群一起交流讨论，
 「吟游」程序人生——YinyouPoet