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

position + margin

實(shí)現(xiàn)的效果：

解析：已知父元素寬高，子元素需要position:absolute，絕對(duì)定位，位置是（top:50%;left:50%）, margin-left:一半子元素width ，margin-top:一半子元素height

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

position + margin

實(shí)現(xiàn)的效果：

解析：未知父元素寬度、高度，子元素只需要設(shè)置，position：absolute,絕對(duì)定位，top/right/bottom/left 為0（4個(gè)屬性值一致就行），margin為auto就行

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

position + transform

實(shí)現(xiàn)效果：

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

flex

實(shí)現(xiàn)效果：

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

display:table

實(shí)現(xiàn)效果：