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

最新推荐文章于 2024-08-24 00:18:19 发布

没有昵称...

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量3.3k

点赞数 4

文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/zebghfv/article/details/121657173

版权

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

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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        #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%;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="item">
            <div class="text">你好啊</div>
        </div>
    </div>
</body>

</html>

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

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

<div id="box">
     <div id="item">
          <div class="text">你好啊</div>
     </div>
</div>

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;
        }