CSS如何實現豎直居中？ 在編寫網頁布局時，我們經常會遇到需要讓一個元素在垂直方向上居中顯示的需求。這時，我們可以使用以下兩種方法實現豎直居中。 1. 使用Flexbox Flexbox 是 CSS3 中新增的一種布局模式，它提供了一種簡單、靈活的方式來對元素進行排列。使用 Flexbox 可以非常容易地實現水平和垂直居中。 首先，在父元素上添加以下樣式： ``` display: flex; align-items: center; justify-content: center; ``` 其中，`display: flex;` 將父元素設置為 Flexbox 布局，`align-items: center;` 將子元素在垂直方向上居中對齊，`justify-content: center;` 將子元素在水平方向上居中對齊。 接下來，在子元素上添加以下樣式即可： ``` margin: auto; ``` 這樣，子元素就會在父元素中豎直居中顯示。 2. 使用絕對定位 另一種實現豎直居中的方法是使用絕對定位。首先，需要將父元素設置為相對定位： ``` position: relative; ``` 接著，在子元素上添加以下樣式： ``` position: absolute; top: 50%; transform: translateY(-50%); ``` 其中，`position: absolute;` 將子元素設置為絕對定位，`top: 50%;` 將子元素的頂部對齊到父元素的中心位置，`transform: translateY(-50%);` 通過 translateY() 函數將子元素向上移動自身高度的一半，從而實現了豎直居中。 總結 以上就是兩種實現豎直居中的方法：使用 Flexbox 或者絕對定位。它們各有優缺點，具體應根據實際需求來選擇。希望對你有所幫助！