当高度为100%的时候，如何让文字垂直居中

2024-07-09 20:18| 来源: 网络整理| 查看: 265

在开发过程中，通常让文字垂直居中的办法就是设置line-height：元素高度。但是这个方法有缺陷，当height是百分比的时候再设置line-height就没有效果了，line-height必须是一个实际的px值。例如高度位百分比的时候再设置line-height的效果如下：代码：

#box { width: 200px; height: 200px; border: 1px solid red; } #item { width: 100%; height: 50%; background-color: aqua; margin: 0; padding: 0; } .text { margin: 0; padding: 0; height: 100%; list-style: 100%; } 你好啊

失败的效果图：在这里插入图片描述

解决办法： 1.设置display: flex; 给需要文字进行垂直居中的元素设置样式：display:flex; aligin-items: center; aligin-items: center;是定义在副轴的对齐方式是居中对齐（默认副轴是竖直方向）。代码： html：

你好啊

css:

.text { margin: 0; padding: 0; height: 100%; display: flex; align-items: center; }

效果图：在这里插入图片描述如需让其在水平也进行居中，则添加一个CSS样式：justify-content: center;

2.给该元素添加伪类（::before或者::after）然后给伪类添加如下代码：

.text::after { content: ''; height: 100%; display: inline-block; vertical-align: middle; }

vertical-align：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，只对行内元素和行内块元素有效，所以设置display:inline-block 3.给父元素设置display:table，然后给需要文字垂直居中的元素设置display: table-cell;vertical-align: middle. css代码：

#item { width: 100%; height: 50%; background-color: aqua; margin: 0; padding: 0; display: table; } .text { width: 100%; margin: 0; padding: 0; height: 100%; display: table-cell; vertical-align: middle; }

3种方式的效果都是一样的。

【本文地址】

公司简介

联系我们