Notes on how to vertically center text

The first method: set line-height to be equal to the height of its element. The disadvantage is that the height of its element must be determined.

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

The second method: the second table-cell plus middle combination

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

Third method:

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

Effect:

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