CSS 设置了line-height等于行高之后文字未垂直居中

三月，

于 2021-04-04 23:39:33 发布

阅读量1.7k

点赞数 2

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_44879122/article/details/115435202

版权

当设置line-height等于高度后，文字未垂直居中。原因是box-sizing: border-box导致height包含padding和border。解决办法是将line-height设置为原始height减去padding和border的值。

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

    <style>
        .box {
            /* box-sizing 属性是防止盒子由于边框和内边距被撑大 */
            box-sizing: border-box;  
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid skyblue;
            /* 行高等于盒子高度 是为了使文字垂直居中 */
            line-height: 100px;
        }
    </style>

<body>
    <div class="box">文字</div>
</body>

上述代码的结果：

发现文字并没有垂直居中

文字垂直居中的原理：

line-height(行高)=文字高度+上空隙+下空隙（上空隙=下空隙）

当line-height=height 的时候文字被挤到中间，就是垂直居中

box-sizing: border-box：

box-sizing 属性是防止盒子由于边框和内边距被撑大
增加该属性后 height=height（原来的）+padding+border

如果有padding值和border边框值
此时line-height=height(现在的) 后，文字并没有被挤到中间，而是偏下

解决办法：

line-height的值等于原来的height值（现在的height值-padding-border）