HTML 垂直水平居中的几种实现方式

1. 垂直水平居中  （父元素宽度、高度已知）

position + margin

实现的效果：

解析：已知父元素宽高，子元素需要position:absolute，绝对定位，位置是（top:50%;left:50%）, margin-left:一半子元素width ，margin-top:一半子元素height

2. 垂直水平居中   (父元素高度、宽度未知)  

position + margin

实现的效果：

解析：未知父元素宽度、高度，子元素只需要设置，position：absolute,绝对定位，top/right/bottom/left 为0（4个属性值一致就行），margin为auto就行

3. 垂直水平居中  (父元素高度、宽度未知)  

position + transform

实现效果：

4.  垂直水平居中（弹性布局）

flex

实现效果：

5. 垂直居中（子元素是文本型）

display:table

实现效果：