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

实现效果:
