可恶，又学到了一点 CSS

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

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

1.疑惑代码

    <div>

        <div>我要水平垂直居中</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;

}

你别说，还真居中了：

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
  

3. 疑惑产生

喜欢东拆拆西拆拆的我发现，上边代码注释掉 vertical-align: middle; 效果并没有变化，依旧垂直居中着，但是将它改成 vertical-align: top; 又起到作用了如下：

4.解决

真的，其实写博客之前我都没有理解为什么会出现这种怪异情况，但是写着写着就来灵感了，原来是这样哈哈哈

其实咱们把文字内容加一点，使它成为多行文本，效果就出来了，没注释掉 vertical-align: middle 的效果如下：

注释掉了，就是这个样子，没有垂直居中：

所以前面的只是巧合，因为是单行文本的原因，平衡上下行距，应该也不叫行距，应该就是为了平衡才会出现垂直居中的效果哦！