几个 css 实现垂直居中的常用方法table 元素中的 td 子元素会自动实现垂直居中，不需要设置任何其他居中的样式。

建议：写 css 布局的时候，能不写 height 就不写，当父元素的 height 不定时，通过设置上下 padding 的值就会很容易实现垂直居中，当父元素的 height 确定的时候，垂直居中就比较麻烦，以下是几个常见的方法：

table 元素中的 td 子元素会自动实现垂直居中，不需要设置任何其他居中的样式。见代码：

// html：
<body>
  <<table>
    <tr>
      <td>一段文字</td>
    </tr>
    </table>
</body>
// css：
table {
  height: 300px;
  border: 1px solid red;
}

如果本身不是 table 元素，而是 div 元素，就把 div 元素装成 table 元素，通过设置 border 来实现，但要注意子元素还要一定设置 vertical-aligh 为 middle。见代码：

// html:
  <div class="parent">
    <div class="child">一段文字</div>
  </div>
// css:
.parent {
  height: 300px;
  border: 1px solid red;
  display:table; 
}
.child {
  display:table-cell;
  vertical-align:middle;
}

通过给父元素的 before 和 after 伪类设置 vertical:middle 辅助实现。注意 display 也一定要设置为 inline-block，见代码：

// html:
  <div class="parent">
    <div class="child">一段文字</div>
  </div>
// css:
.parent {
  height: 300px;
  border: 1px solid red;
}
.child {
  display: inline-block;
  vertical-align: middle;
}
.parent:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.parent:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

通过设置绝对定位以及 margin-top 来调整，缺点是必须要指明子元素的 height（若还要水平居中，则必须要指明 width），因为 margin-top 的值就是负的 height 的一半。见代码：

// html:
  <div class="parent">
    <div class="child">一段文字</div>
  </div>
// css:
.parent {
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  top:50%;
  left:50%;
  border:1px solid green;
  width:70px;
  height:30px;
  margin-top:-15px;
  margin-left:-35px;
}

通过设置绝对定位以及 translate 实现，与上一种的实现原理差不多，而且不需要一定设置子元素的 height 值。见代码：

// html:
  <div class="parent">
    <div class="child">一段文字</div>
  </div>
// css:
.parent {
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  top:50%;
  left:50%;
  border:1px solid green;
  transform:translate(-50%,-50%);
}

通过设置绝对定位以及 margin:auto 实现，必须要设置子元素的 height ，同时设置 top：0，bottom：0（若要设置水平居中，就必须要设置 width、left以及right）。见代码：

// html:
  <div class="parent">
    <div class="child">一段文字</div>
  </div>
// css:
.parent {
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  height:30px;
  width:70px;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  border:1px solid green;
}

这种方法最容易，那就是通过 flex 布局的方式，直接设置 align-items 即可。见代码：

// html:
  <div class="parent">
    <div class="child">一段文字</div>
  </div>
// css:
.parent {
  height: 300px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

若有更多方法，欢迎讨论。