CSS文本垂直居中

flex布局也可以实现，这里不再介绍；

第一种：line-height与父亲设置一样的heigth；

<div class="parent">
   <span class="child">hei,boy next door!</span>
</div>

<style>
.parent {
  height: 100px;
  width: 500px;
  background-color: aqua;
}
.child {
  line-height: 100px;
}
</style>

注意：line-height的方式，

①line-height：30px；

②line-height：2；（line-height：32px），因为一般浏览器默认的行高为16px；

③line-height：200%；（line-height：32px），同上；

方案二：利用vertical-align: middle：

<div class="parent">hei,boy next door!</div>

<style>
.parent {
  height: 100px;
  width: 500px;
  background-color: aqua;
  vertical-align: middle;
  display: table-cell;
}
</style>

注意：vertical-align: middle不起作用，因为vertical-align属性只对行内元素有效，对块内元素无效，设置display: table-cell;