居中总结

行盒(行块盒)水平居中

直接设置行盒(行块盒)的父元素text-align: center

块盒水平居中(定宽)

1. 设置左右margin为auto
2. 设置父元素相对定位, 然后设置目标块盒绝对定位, 并且left: 50%, 以及margin-left: -(元素宽度的一半)
3. 设置父元素相对定位, 然后设置目标块盒绝对定位, 并且left: 50%, 以及transform: translate(-50%)

块盒水平居中(不定宽)

1. 子元素默认占满父元素包含块, 此时需要设置子元素为display: inline-block, 再给父元素设置text-align: center
2. 设置父元素相对定位, 然后设置子元素绝对定位, 并且left: 50%, 以及transform: translate(-50%)

使用flexbox布局, 不管是否定宽, 都可实现水平居中
给父元素设置display: flex; justify-content: center即可

单行文本垂直居中

设置文本所在元素的line-height等于区域的高度

多行的行盒垂直居中

给父元素设置display: table-cell; vertical-align: middle即可

块盒垂直居中

类似块盒水平居中, 略

水平垂直都居中(顶宽高)

是水平垂直居中的结合, 略