line-height等于height为什么不居中

_处女座程序员的日常

已于 2022-02-26 10:21:36 修改

阅读量1.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：盒模型文章标签： css css3 html

于 2022-01-26 12:02:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42931285/article/details/122698960

盒模型专栏收录该内容

3 篇文章

订阅专栏

本文探讨了CSS盒模型中box-sizing属性的作用，并通过实例展示了如何利用box-sizing:border-box和content-box实现文本的垂直居中。对于不同情况下的height计算进行了详细说明。

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

注意：height一定是内容盒的高度，即在box-sizing:content-box的情况下，若为border-box时，此时的height为整个盒子的高度，需要减去padding,border、margin的尺寸才为真实的内容盒的height。
如一个盒子box-sizing:border-box,border：10px,height:40px，这时内容盒的高度应该为20px,line-height设置为20px就可实现上下居中。

注：box-sizing 属性的默认值是：content-box ，但实际开发中我们很多时候可能为写成：box-sizing: content-box。

下面我们写一个box-sizing：border-box的例子：

  <style>
        div{
            width: 200px;
            height: 00px;
            border: 20px solid red;
            background-color: red;
            height: 100px;
            line-height: 100px;
            box-sizing: border-box;
        }
    </style>
       <div>好好学习</div>