布局--居中方案

水平居中

• inline-block + text-align

.child{ display: inline-block; }.parent{ text-align: center; }

• table + margin

.child{    display: table;    margin: 0 auto;}

display: table – 指定为块级元素的table，在表现上类似block元素，但是宽度为内容宽

• absolute + transform

.parent{ position: relative; }.child{    position: absolute;    left: 50%;    transform: translateX(-50%);}

垂直居中

• table-cell + vertical-align

.parent {    display: table-cell;    vertical-align: middle;}

• absolute + transform

.parent{position: relative;}.child{    position: absolute;    top: 50%;    transform: translateY(-50%);}

• flex + align-items

.parent{    display: flex;    align-items: center;}

垂直水平居中

• absolute

.parent {position: relative}.child{    width: 50px;    height: 50px;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;}

• flex

.parent{    display: flex;    justify-content: center;    align-items: center;}

• inline-block + text-align + table-cell + vertical-align

---

• absolute + transform