CSS 提供了一種簡單且優雅的方法來對元素進行水平和垂直居中。在學習垂直兩端居中之前，我們需要了解一下 CSS 的盒模型。

盒模型:
+——————————————————+
|   margin 外邊距      |
|———————————————|
|   border 邊框         |
|———————————————|
|  padding 內邊距     |
|———————————————|
|      content 內容     |
+——————————————————+

在 CSS 的盒模型中，一個元素可以分為四個部分：外邊距（margin）、邊框（border）、內邊距（padding）和內容（content）。如上圖所示，它們依次包裹在元素周圍。

通常情況下，我們要實現元素居中，需要將元素寬度和高度設為固定值，并在 CSS 中使用 margin 屬性來控制外邊距。對于水平居中而言，我們只需要將左右外邊距設置為 auto 即可：

div {
width: 300px;
margin: 0 auto;
}

但是，垂直兩端居中的情況稍有不同。在 CSS 中，沒有直接控制垂直居中的屬性。不過，我們可以通過一些技巧來實現垂直居中。

下面是一種常見的方式：使用 table-cell 和 vertical-align 屬性。首先，我們將父元素的 display 屬性設置為 table，子元素的 display 屬性設置為 table-cell。然后，我們可以將子元素的 vertical-align 屬性設置為 middle，即可實現垂直兩端居中。

.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}

總結一下：

• 水平兩端居中可以通過 margin: 0 auto 來實現；
• 垂直兩端居中可以使用 table-cell 和 vertical-align 屬性來實現。