使用上下 padding 相等也解决这个问题。如果不生效的话，那么可以设置父元素的 display 为 table ，子元素的 display 为 table-cell 中，然后设置 vertical-align 为 middle 实现垂直居中。 - 在线编辑器

CSS 布局
CSS水平，垂直居中的11个场景
使用上下 padding 相等也解决这个问题。如果不生效的话，那么可以设置父元素的 display 为 table ，子元素的 display 为 table-cell 中，然后设置 vertical-align 为 middle 实现垂直居中。

          <style>
  table.parent-7 {
    background: green;
    width: 240px;
    border-collapse: separate;
    margin: 20px;
    height: 250px;
    padding: 20px;
  }

  /* 默认的 vertical-align 是 middle，不用再设置 */
  table.parent-7 td {
    background: black;
    color: white;
    border: 0;
    padding: 20px;
  }

  .center-table {
    box-sizing: border-box;
    display: table;
    height: 250px;
    background: green;
    width: 240px;
    margin: 20px;
    padding: 20px;
  }

  .center-table p {
    display: table-cell;
    margin: 0;
    background: black;
    color: white;
    padding: 20px;
    vertical-align: middle;
  }
</style>

<table class="parent-7">
  <tbody>
    <tr>
      <td>
        我是多行文本，在一个表格单元中垂直居中。
      </td>
    </tr>
  </tbody>
</table>

<div class="center-table">
  <p>我是多行文本，在一个CSS创建的表格布局中垂直居中。</p>
</div>

        