文字垂直居中方法小记

第一种方法：line-height 设置为等于其元素的高度height，弊端就是必须要确定它的元素高度

.test {
  width: 200px;
  height: 100px;
  border: 1px solid blue;
  //第一种
  line-height: 100px;
}

第二种方法：第二种 table-cell 加 middle组合

.test {
  width: 200px;
  height: 100px;
  border: 1px solid blue;
   //第二种 table-cell 加 middle组合
  display: table-cell;
  vertical-align: middle;  
}

第三种方法：

.test {
  width: 200px;
  height: 100px;
  border: 1px solid blue;
   //第三种  flex加center
  display: flex;
  align-items: center;
}

效果：

<div class="test">1234</div>