- 使用flexbox布局
- 使用绝对定位+margin:auto
- 使用table-cell布局
- 使用translate变换
- 使用grid布局
- 使用line-height和height等值且不为auto
- 使用vertical-align:middle
- 使用align-items:center和justify-content:center
- 使用display:flex和align-self:center
- 使用position:absolute和top:50%及transform:translateY(-50%)
CSS 实现垂直居中的有哪些方式?
2 min read