通过CSS来垂直居中文本

基本的方式

div {
  height: 90px;
  line-height: 90px;

  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

更常用的方式

div {
  height: 200px;
  line-height: 200px;

  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>需要被垂直居中的文字 </span>
</div>

使用表布局的方式

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>