垂直居中都有哪些实现办法？

最新推荐文章于 2023-09-30 13:11:25 发布

原创最新推荐文章于 2023-09-30 13:11:25 发布 · 178 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍8种CSS垂直居中技巧，包括使用verticle-align、display:flex、伪元素:before、display:table-cell、transform及line-height等方法，适合不同场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要怎么让它垂直居中呢?（抓耳挠腮…）
多种方法在线解答！

如下：
1、通过verticle-align:middle实现CSS垂直居中。
2、通过display:flex实现CSS垂直居中。
3、通过伪元素:before实现CSS垂直居中。
4、通过display:table-cell实现CSS垂直居中。
5、通过隐藏节点实现CSS垂直居中。
6、已知父元素高度通过transform实现CSS垂直居中。
7、未知父元素高度通过transform实现CSS垂直居中。
8、通过line-height实现CSS垂直居中。

具体实现方法，请下会见分晓，谢谢。