可恶，又学到了一点 CSS

站长

2023年09月25日 15:27 · 阅读数 59

昨天在做笔记整理的时候，看到一个面试题，如何实现水平垂直居中，虽然心里有一点点数，但是看到好几种答案，还是决定亲自动手验证一番，这验证一开始就出现了小问题，接着就像捅了个马蜂窝一样，各种疑惑扑面而来，而我又想弄清楚，折腾大半天，终于把问题锁定到了 line-height 和 vertical-align 身上。

大家现在应该都用 flex 布局，但是毕竟折腾好一会呢，好歹记录一下自己的收获哈哈

1.疑惑代码

    <div class="container">
        <div class="box">我要水平垂直居中</div>
    </div>

.container{
    border: 2px solid black;
    background-color: chartreuse;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}
.box{
    display: inline-block;
    line-height: normal;
    font-size: 1rem;
    vertical-align: middle;
    background-color: cornflowerblue;
}

你别说，还真居中了：

可恶，又学到了一点 CSS

2.一些知识点

2.1 水平垂直对齐

有一些疑惑真的只是自己无知哈哈哈

text-align 不仅可以作用在文本，还可以对行内元素和行内块元素有效果，设置水平对齐方式
vertical-align 只对行内元素和行内块元素起作用，设置元素的垂直对齐方式

2.2 line-height

说来也蛮搞笑的，我对 line-height 的印象就是，当元素 height 等于 line-height 的时候，元素内部的文本就会垂直居中。但是昨天查资料的时候发现，这里面牵扯到了很多复杂的问题。

简单的和我一起学习一下吧，MDN 上边说的，line-height 可用于多行文本的间距或者是单行文本的高度等

看到这里大家可以去看一下，底下的两篇参考文章，得出以下结论：

没给元素设置高度时，元素高度采用的是 line-height 的高度，这个属性具有继承性。也自带默认值，所以当你给一个没有设置高度的元素设置 line-height:0;,即使里面有文本，它也是会塌陷的。
可以分为好几种盒子，当你设置 line-height 的时候，行内框是不会变化的，改变的是行距，它只由 font-size 的决定。这其实就是上边元素 height 等于 line-height 的时候，元素内文本会垂直居中的原因。
取值为 number 时，line-height 为 number 乘以当前元素的 font-size,取 normal 时一般就是 number 为 1.2