css 居中显示

CSS 居中显示

css中设置居中显示

定位法：position：absolute

如果子控件有定义宽和高的话可以使用定位法。

注：margin-top和margin-left的值均为高和宽的一半。

margin：auto法

这个也可以是定位法。必须子空间设置宽的值否则没有效果。

margin：auto；是水平垂直都居中

margin：auto 0；是水平居中

margin：0 auto；是垂直居中

3．display：table-cell法

主要针对多行文字内容的垂直居中对齐。

text-align：center设置了文字的水平居中对齐

vertical-align：middle设置的是垂直居中对齐

4．transform：translate（x,y）法

当子控件没有设置宽和高值可以使用这个方法实现

5．before, after伪元素法

也是让子控件元素垂直居中，如想水平居中可配合其他几种方法完成。如给子空间元素设置：margin：0 auto；

6.Flex布局法

要垂直居中的元素无需设置宽和高的值，可以用在自适应页面来实现水平垂直居中