css的居中方法

1.块元素

（1）flex居中：将父元素display设置为flex
方案一在父元素上添加
justify-content: center;然子元素水平居中
align-items: center;让垂直居中
方案二；让子元素
margin: auot;直接全部居中

（2）利用定位居中

将父元素开启相对定位，子元素开启绝对定位

top: 50%;  left: 50%;

margin-top：-子元素高的一半px；

margin-left： -子元素宽的一半px；

（不知道子元素具体大小时用transform：translate(-50%,-50%)）;

（3）知道子元素和父元素的高和宽

margin 0 auto；

margin-top：计算可得；

注意要给父元素加overflow=hidden

(4)margin+定位

父元素开启相对定位子元素开启绝对定位

然后子元素top left bottom right都设置为零

margin： 0；

2.文本，行内元素居中

1.单行文本单个行内元素

父元素中设置

水平居中：text-align=center
 垂直居中：line-height:父元素的height

2.多个行内元素对齐

水平居中：text-align=center
 垂直居中：line-height:父元素的height
行内块元素和行内元素之间的对齐要
在此基础上要在父元素上加
font-size：0在子元素上从新定义大小
在行内块元素和行内元素上加
 vertical-align: middle;