web前端-01：关于css居中的几种方法

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；来做到水平居中