CSS居中方法

css居中方法非常多，根据工作的实际情况采用恰当方法，可取到事半功倍的效果。

就常见的一些居中方法整理如下：

代码如下：

<div class="con">
　　<div class="con1">
　　　　<img src="01.jpg" />
　　　　<span>前端开发</span>
　　</div>
</div>

如果.con1在知道宽和高的情况下要使其居中，可以采用如下方法：

单纯的垂直居中：margin：0 auto；（前提是对.con1设置了固定宽度且宽度小于父元素.con）；

既垂直居中也水平居中：.con{position:relative;}

　　　　　　　　　　　.con1{width:300px;height:300px; position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-150px;}

使.con1里面的图片居中的方法：.con1{height：300px; line-heigth:300px;}

　　　　　　　　　　　　　　  .con1 img{vertical-align:middle}

使.con1里面的文字居中的方法：只使用.con1{height：300px; line-heigth:300px;}就够了；

万能的居中方法：

方法一：

.con{position:relative;}

.con1{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

方法二：

.con{position:relative;}

.con1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);}

Flexbox布局下的水平垂直居中方法：

.con{justify-content:center;align-items:center;display:-webkit-flex; }

CSS居中方法

原文：http://www.cnblogs.com/lmsblogs/p/5828029.html