垂直居中相对比较复杂
行级元素(inline inline-*类型)垂直居中
单行情况
- 有时候看似居中了，其实是上下padding预留了相同的空间，所以中间的内容居中了。
- 不用padding，则可以将
line-height和height的值设置相等。该方法比较常用。
多行情况
- 多行情况也可以用padding填充等量的上下空间。如果不采用这种方式，则可以使用如下模拟table或者直接table元素的方式。
- 文字放到table里面进行处理。
- 使用css，模拟其他元素为table，来达到类似table的效果，但如果用了后者，则需要给
vertical-align: middle属性。
- 如果不用table方法，可以使用flexbox的方法。将内容放到一个flex里面，然后采用column的排列方式，并且给
justify-content: center;属性居中。并且父元素要有一个高度。
- 如果上面table和flex方式都不使用，则可以使用一种叫做“ghost element”的技术。在容器内设置一个全高度的伪元素，且让文字内容垂直对齐。
块级元素垂直居中
- 待设定元素高度已知的情况下，可以使用绝对定位配合负margin-top的方式实现。这种方式，即便缩放父元素高度，子元素还是属于居中状态。
- 待设定元素高度未知情况下，可以使用
transform: translateY(-50%)来处理居中。这种方式，即便缩放子元素高度，也是能保持居中的。
- 如果不考虑缩放的时候需要居中，则可以使用table或者用css来达到table的方式来实现。
- 也可以用flex布局来实现，和行级元素垂直居中思想一致。
- flex布局如果父元素不给
justify-content: center属性，则可以在子元素上添加margin: auto来实现居中效果。
ref:
