line-height不垂直居中inline-block

Question

我试图像这样垂直居中一个内联块：

div {
  width: 50px;
  height: 50px;
  background: red;
  line-height: 50px;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: white;
}

<div>
  <span></span>
</div>

但是跨度不是垂直居中的。为什么呢？

Answer 1

因为line-height设置了文字基线的位置（span的底端）。由于您的跨度为20px，因此必须将其中一半添加到line-height：

div {
  width: 50px;
  height: 50px;
  background: red;
  line-height: 60px;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: white;
}

<div>
  <span></span>
</div>