如何用CSS實現元素豎直居中

CSS可以實現元素的水平居中和垂直居中，但垂直居中相對於水平居中稍微有些麻煩。在本文中，我會從幾個角度來闡述如何使用CSS實現元素豎直居中。

一、使用display:flex

CSS3中的flex布局非常方便，可以通過一些簡單的設置輕鬆實現元素的豎直居中。通過設置包裹元素的display屬性為flex，並且設置子元素的align-items屬性為center，就可以實現子元素的豎直居中。

<div class="wrapper">
  <div class="centered">我被居中了</div>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background: #f1f1f1;
}

.centered {
  text-align: center;
  font-size: 48px;
}

二、使用position和transform

另一種方式是使用position和transform屬性來實現豎直居中。通過設置元素的position屬性為absolute，並且設置top和left屬性為50%，再使用transform:translate來將元素向上移動自身高度的一半，就可以實現元素的豎直居中。

<div class="wrapper">
  <div class="centered">我被居中了</div>
</div>

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f1f1f1;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 48px;
}

三、使用display:table和display:table-cell

最後一種方式是使用display:table和display:table-cell屬性來實現豎直居中。通過將包裹元素設置display:table，在內部元素設置display:table-cell和vertical-align:center，就可以實現元素的豎直居中。

<div class="wrapper">
  <div class="centered">我被居中了</div>
</div>

.wrapper {
  display: table;
  width: 100%;
  height: 200px;
  background: #f1f1f1;
}

.centered {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 48px;
}

這三種方式都可以實現元素的豎直居中，具體使用哪一種方式可以根據不同情況進行選擇。其中，flex布局是CSS3新特性，需要考慮兼容性問題；position和transform方式不需要使用額外的標籤；display:table和display:table-cell的方式比較老舊。總的來說，使用flex布局是比較推薦的方式。

在實際的開發中，元素的豎直居中是非常常見的需求，掌握幾種方法可以更輕鬆地完成工作。