水平居中、垂直居中

水平居中

• inline行内元素：其父元素设置 text-align: center
• block块元素： margin: auto（自身要有宽度）
• absolute: left: 50% + margin-left负值(自身宽度一半）

垂直居中

• inline元素： line-height: height
• absolute元素： top： 50% + margin-top为负值（自身高度的一半）
• absolute元素： top: 50% + transform(-50%, -50%)
• absolute元素：top left right bottom = 0, + margin: auto

水平垂直居中

1.设置父元素为相对定位，给子元素设置绝对定位，
top: 0; right: 0; bottom: 0; left: 0; margin: auto;
2.设置父元素为相对定位，给子元素设置绝对定位，
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%)/transform(-50%, -50%)
3.设置父元素为flex定位，
justify-content: center; align-items: center;
4.设置父元素绝对定位，给子元素设置绝对定位
left 50%; top: 50%; margin-left: 一半的宽度； margin-top： 一半的高度

transform和flex都是css3中的内容