CSS——行高

浏览器默认文字大小:16px

行高:是基线与基线之间的距离

行高=文字高度+上下边距

一行文字行高和父元素高度一致的时候,垂直居中显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box1 {
             400px;
            height: 200px;
            background-color: aliceblue;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">
        你好
    </div>
    
</body>
</html>

效果:

注释:因为行高的定义是文字高度+上下边距,所以当行高定义的值与父元素一样时,它就会去找上下边距,自然的就会居中。

原文地址:https://www.cnblogs.com/wuqiuxue/p/7792089.html