- 水平居中
① display: inline-block; text-align: center; (text-align具有继承性，子元素徐自定义覆盖)
② position: absolute; left: 50%; transform: translateX(-50%); （父元素需要设置position）
③ display: block； margin: 0 auto; 子元素不能脱离文档流，否则外边距失效
- 垂直居中
① position: absolute; top: 50%; transform: translateY(-50%) ;（父元素需要设置position）
② display: table-cell; vertical-align: center; (vertical-align具有继承性，子元素徐自定义覆盖)
- 水平垂直居中
① position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) ;（父元素需要设置position）
弹性布局也可以实现以上需求，而且简单
