CSS居中方法
2016-09-01 12:02 平凡故事 阅读(211) 评论(0) 编辑 收藏 举报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;
}
