CSS垂直居中的8种方法

2026-02-24 21:34:01

1、通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。CSS水平居中的9种方法

CSS水平居中的9种方法

CSS垂直居中的8种方法

6、已知父元素高度通过transform实现CSS垂直居中。

给子元素的position:relative,再通过translateY即可定位到垂直居中的位置。

CSS垂直居中的8种方法

7、未知父元素高度通过transform实现CSS垂直居中。

先给父元素position:relative,再给子元素position:absolute,通过translateY即可定位到垂直居中的位置。

CSS垂直居中的8种方法

8、通过line-height实现CSS垂直居中。

设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。

CSS垂直居中的8种方法

猜你喜欢