3、table 方式

通过设置父类元素的布局为 table，然后将子元素的布局设置为 table-cell 单元格方式，最后通过 vertical-align 使元素垂直居中。

4、position + margin auto 方式

设置子元素绝对定位（注意，这将不关心当前元素是否块级还是内联元素），然后将该元素的定位位置调为置顶和置底，将 margin 设置为 auto 达到最后效果。

5、position + margin 偏移方式

类似上例，只需设置 top 置顶，然后调试 margin-top 来使得子元素偏移完成垂直居中。

6、position + transform 方式

和水平居中一样，先设置为绝对布局，并设置 top 50%、bottom 50%，最后通过 transform 设置 x 轴、y 轴的偏移量来调整子元素的定位。

7、flex 方式

弹性布局，最简单的方式。一个 align-items 搞定。

总结

上面只列举了 7 种垂直居中的实现方法，相信还要更多的方式。不过不管哪种方法，能在业务代码实践中最快速、最准确的运用才是最佳实践。

相关链接

css 水平居中的几种实现方式

希望在读的各位能有所收获。

关于我

一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。

关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。

点击 ↙ 了解更多，了解更多前端开发技术文章。