CSS实现垂直水平居中
水平容易，垂直难啊！且学且珍惜~~
先就介绍常见的三种方法，更多的居中方法可以自行百度谷歌。
目录：
1.绝对定位+margin:auto法
2.绝对定位+margin负间距法
3.Flex弹性布局法
先顺带记一下水平居中：
- 内联元素水平居中：在父元素上设置 text-align : center;
- 块级元素水平居中：margin : 0 auto;
正文：
1. 绝对定位+margin:auto法
给父元素设置：
position:relative;//父元素相对定位
居中的元素设置：
position:absolute;//子元素绝对定位
margin:auto;
left:0;
top:0;
bottom:0;
right:0;
原理 : 定位都给0了，元素自己也不知道该去哪儿，只好待在中间不知所措...(猜)
2. 绝对定位+margin负间距法
给父元素设置：
position:relative;//父元素相对定位
居中的元素设置：
width:200px;
height:200px;
position:absolute;//子元素绝对定位
left:50%;
top:50%;
margin-left:-100px;//width的一半
margin-top:-100px;//height的一半
3. Flex弹性布局法
给父元素设置：
display: flex;
justify-content: center; /*显示在主轴的中间*/
align-items: center; /*子项在侧轴中间位置*/
其实也不是很难对不对~
End.
推荐阅读：
