如何實現CSS布局中的垂直對齊？

一、vertical-align屬性詳解

在CSS中，有一個用於控制行內元素垂直對齊的屬性：vertical-align。這個屬性的取值很多，常用的如下：

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

其中，vertical-align: middle;是最常用也最簡單的控制垂直居中的方式。舉個例子：

<div class="container">
  <div class="child">
    <p>這裡是要垂直居中的文字</p>
  </div>
</div>

.container {
  height: 300px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child {
  display: inline-block;
}

其中，父元素.container的高度要先規定好，然後使用display: table-cell;和vertical-align: middle;就能實現這個元素內部的垂直居中。注意，這個方法只針對行內元素、內聯塊元素、表格單元格等這些可以應用vertical-align屬性的元素有效。

二、flex布局中的垂直居中

Flex布局（Flexible Box)是CSS3新增的一種布局方式，它常用於解決常規布局難以解決的問題，比如垂直居中。

在Flex布局中，實現元素垂直居中的方法非常簡單，只需要在父元素上加上display: flex;align-items: center;即可：

<div class="container">
  <div class="child">
    <p>這裡是要垂直居中的文字</p>
  </div>
</div>

.container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  display: inline-block;
}

其中，父元素.container也要先規定好高度，然後使用display: flex;align-items: center;就能實現所有的直接子元素垂直居中。

三、absolute+transform方式

我們還可以使用absolute+transform方式實現垂直居中，只需要這樣寫：

<div class="container">
  <div class="child">
    <p>這裡是要垂直居中的文字</p>
  </div>
</div>

.container {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

其中，父元素.container要先設置定位方式為absolute和高度，子元素.child則使用定位方式absolute、top:50%和transform: translateY(-50%);就能實現垂直居中效果了。只不過要注意，這個方法只能用於已知高度和寬度的元素進行垂直居中。

四、line-height方式

對於行內元素而言，還有一種更容易上手的垂直居中方法：line-height。

代碼如下：

<p class="box">這裡是要垂直居中的文字</p>

.box {
  height: 100px;
  line-height: 100px;
}

其中，設置好元素高度後，將line-height設置為相同的高度，就能實現垂直居中。

五、表格單元格方法

最後，還有一種方法是使用表格單元格方式實現垂直居中。代碼如下：

<table class="table">
  <tbody>
    <tr>
      <td class="cell">這裡是要垂直居中的文字</td>
    </tr>
  </tbody>
</table>

.table {
  height: 300px;
  border-collapse: collapse;
}

.cell {
  text-align: center;
  vertical-align: middle;
}

其中，使用table標籤、border-collapse: collapse;隱藏邊框後，再將單元格td的vertical-align: middle;，就能實現單元格內的元素垂直居中。