css实现居中的方法总结

在页面布局中经常会涉及到各种居中问题，下面统计下经常用到的各种居中方法：

1.行内元素的水平居中

如果父元素是块级元素，那直接给父元素设置 text-align：center

样式设置如下：

css 1

效果如下：

行内元素水平居中

2.行内元素的垂直居中

       1.单行元素

单行元素设置行高等于box的高。样式如下：

单行样式设置行高

效果如下：

单行元素垂直居中

2.多行行内元素

以下只列举一种实现方法。利用display：table-cell和vertical-align:middle;

多行行内元素

效果如下：

多行行内元素

3.块级元素的水平居中

块级元素的水平居中方法比较简单，利用margin就能实现：

水平居中

4.块级元素的垂直居中

垂直居中

主要是利用的position定位和top：50%，margin-top是元素height的一半来实现的。

还有使用display：flex的定位方法来实现垂直居中，此处不一一列举了。