CSS 实现 div 中文字垂直居中 - Flex 和 Table 布局方法

可以使用 CSS 的 flex 布局来实现：

<div class='container'>
  <p>这是一段文字</p>
</div>

<style>
.container{
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>

或者使用 CSS 的 table 布局来实现：

<div class='container'>
  <div class='cell'>
    <p>这是一段文字</p>
  </div>
</div>

<style>
.container{
  display: table;
  width: 100%;
  height: 100%;
}

.cell{
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}
</style>