CSS居中方法

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

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

代码如下：

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

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

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

既垂直居中也水平居中：.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;

　　}