web前端-01：关于css居中的几种方法
在学习web前端的过程中，居中问题应该算得上是个比较经典的问题了吧，关于居中的方法也有很多，总结一下我自己比较喜欢用的几个方法。
1 利用绝对定位来做到水平垂直居中
前提是父元素定位为relative
css示例：
.abs-center{
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
margin: auto;
}
2 利用css的transform选项做到水平垂直居中
css中的定位都是以左上角为准，在绝对定位下top和left均设置为50%
，此时元素的左上角位于父元素的中心，再用transform选项的translate函数相对于子元素自身水平垂直方向各平移 -50%，子元素就可以水平垂直居中啦。
根据情况需要在transform前加上浏览器厂商前缀
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3 文本的水平垂直居中
文本水平垂直剧中的方法比较简单, 注意设置line-height为父元素的高度
.text-center{
width: 100%;
text-align: center;
line-height: 父元素的高度;
}
4 其他水平或垂直居中
掌握了以上三种，单独的水平或垂直居中想必就简单的多了，对其稍加修改就可以得到相应的水平或者是垂直居中。
除此之外，对于块级元素，也可以用margin：0 auto；来做到水平居中