完美实现CSS垂直居中的11种方法

当我们在做网页布局时，由于不同元素的高度不同，垂直居中一直是比较困难的问题。下面我将详细讲解“完美实现CSS垂直居中的11种方法”的完整攻略：

方法一：line-height

在父元素中使用line-height属性设置跟父元素高度相等的行高，然后在子元素中使用vertical-align:middle将子元素垂直居中。

示例：

<div class="parent">
  <div class="child">垂直居中的文本</div>
</div>

.parent {
  height: 200px;
  line-height: 200px;
  text-align: center;
  background-color: #eee;
}

.child{
  display: inline-block;
  vertical-align: middle;
}

方法二：table-cell

将父元素的display属性设置为table-cell，然后在子元素中使用vertical-align:middle将子元素垂直居中。

示例：

<div class="parent">
  <div class="child">垂直居中的文本</div>
</div>

.parent {
  display: table-cell;
  height: 200px;
  text-align: center;
  background-color: #eee;
  vertical-align: middle;
}

.child{
  display: inline-block;
  vertical-align: middle;
}

以上是两种常见的CSS垂直居中方法，剩余的9种方法可以在本文中以及相关的文章中了解到。