css元素垂直居中的实现方法

元素垂直居中在页面布局中很常见，我总结了下面几种实现方法，并会在后续前端开发过程中根据自身经验补充新的方案。

一、内联元素或单行文本垂直居中

1.css 设置父元素的 height 与 line-height 属性相等。示例代码如下：

<style>
.parent-box {
  height: 100px;
  line-height: 100px;
}
</style>

<div class="parent-box">
  <span>垂直居中的文本</span>
</div>

2.给需要垂直居中的内联元素设置 vertical-align: middle。注意这里说的是内联元素，文本需要被 span、a 标签等内联元素包裹，这个方法在不方便给父元素设置 line-height 属性时特别有用。示例代码如下：

<style>
.parent-box {
  height: 100px;
}
.parent-box span {
  vertical-align: middle;
}
</style>

<div class="parent-box">
  <span>垂直居中的文本</span>
</div>

3.给父容器添加样式 display: table-cell; vertical-align: middle; 实现内容垂直居中。通过设置元素的 css 属性 display 为 table-cell，子元素将按照表格单元格内容规范显示。示例代码如下：

<style>
.parent-box {
  display: table-cell;
  height: 100px;
  vertical-align: middle;
}
</style>

<div class="parent-box">
  <span>垂直居中的文本</span>
</div>