CSS实现垂直居中（八种）

您所在的位置：网站首页 › css设置文本垂直对齐 › CSS实现垂直居中（八种）

CSS实现垂直居中（八种）

2024-04-04 08:52| 来源: 网络整理| 查看: 265

1. 使用line-height实现垂直居中

适合文本使用，子元素的line-height跟父元素的height一样即可

1.1 代码 .div1 { width: 400px; height: 100px; background-color: blue; } p { line-height: 100px; } 使用line-height实现垂直居中 1.2效果图

在这里插入图片描述

2. 使用relative相对定位居中

子元素使用相对定位 position: relative;top: 40%;，这个40%是这么来的呢？因为相对定位是根据元素的头去定位的。计算方式:（容器高度-元素自身高度）/2。（不建议使用）

2.1 代码 .div2 { width: 400px; height: 100px; background-color: green; } .div2>p { position: relative; top: 40%; } relative相对定位居中 2.2 效果图

在这里插入图片描述

3. 使用absolute绝对定位居中

第三种方式跟第二种的差不多，不同的是这次使用了top: 50%; ，然后使用负值的margin解决定位差距，margin-top: -10.5px;为子元素自身高度的一半.最后注意子元素使用position: absolute;绝对布局时，要先设置父元素的position: relative为相对定位。（不建议使用，需要自己计算子元素的高度）

3.1 代码 } .div3 { width: 400px; height: 100px; background-color: yellow; position: relative; } .div3 > p { position: absolute; top: 50%; margin-top: -10.5px; } relative相对定位居中 3.2 效果图

在这里插入图片描述

4. absolute+margin实现垂直居中

利用绝对定位top: 0;left: 0;bottom: 0;right: 0;这样子元素元素就会充满整个容器，这时候使用margin: auto 0;就能使元素居中啦。这个记得给这个元素设定高度哦。

4.1代码 .div4 { width: 400px; height: 100px; background-color: plum; position: relative; } .div4 > p { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto 0; height: 21px; } absolute+margin实现垂直居中

4.2 效果图在这里插入图片描述

5. 使用table-cell实现垂直居中

第五种没什么好解释的，记住这两句代码就完事了display: table-cell;vertical-align: middle;

5.1 代码 .div5 { width: 400px; height: 100px; background-color: pink; display: table-cell; vertical-align: middle; } .div5 > p { /* nothing to do */ } table-cell实现垂直居中 5.2 效果图

在这里插入图片描述