css的居中方式

一、水平居中：

1、内联元素。利用 text-align: center; 可以实现在块级元素内部的内联元素水平居中。
2、块级元素。通过把固定宽度块级元素的margin-left和margin-right设成auto。 margin: 0 auto;。
3、多块级元素
（1）利用inline-block。设置块级元素的显示类型为inline-block和父容器的text-align属性。
（2）利用display: flex。弹性布局。设置弹性盒子元素在主轴（横轴）方向上的对齐方式，子元素水平居中显示)（display: flex;justify-content: center;)。

二、垂直居中：

1、单行内联元素。设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。height: 120px;line-height: 120px;。
2、多行元素
（1）利用表布局。父元素：display: table;子元素：display: table-cell;vertical-align: middle;。
（2）利用flex布局。父元素：display: flex;flex-direction: column;justify-content: center;。
（3）利用“精灵元素”。父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐。
3、块级元素
（1）固定高度的块级元素。绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半。
（2）未知高度的块级元素。CSS3中的transform属性向Y轴反向偏移50%.父级相对定位。子级绝对定位；top:50%;transform:translateY(-50%);)

三、水平垂直居中：

1、固定宽高元素。通过margin平移元素整体宽度的一半。
2、未知宽高元素
（1）利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半。父级相对定位。子级绝对定位；top:50%;left:50%;transform:translate(-50%，-50%);）
（2）利用flex布局（父元素：display: flex;justify-content: center;align-items: center;）