2018-07-24 多行文字的垂直居中，使用line-heig

实现多行文字垂直居中，有很多种方法。常见的就有浮动处理，但是这里，用line-height实现。

<div class="mulit-line__wrapper">
  <span class="mulit-line">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span>
</div>

.mulit-line__wrapper {
  margin-left: 100px;
  margin-top: 20px;
  width: 280px;
  line-height: 150px;
  border: 1px dashed #cccccc;
  font-size: 0;
}
.mulit-line {
  font-size: 14px;
  line-height: 18px;
  vertical-align: middle;
  display: inline-block;
}

---

效果图：

image.png

---

参考：

css行高line-height的一些深入理解及应用