CSS 垂直居中方式 在 CSS 中垂直居中一直是一個令人頭疼的問題。本文將討論常見的幾種垂直居中方式。 1. 使用 display: flex 使用 display: flex 可以非常容易地實現垂直居中。只需要將 flex 容器的 align-items 屬性設置為 center 即可。 ```css .container { display: flex; align-items: center; /* 垂直居中 */ } ``` 2. 使用 table-cell table-cell 是另一種常用的垂直居中方式。使用 table-cell 可以將元素視為表格單元格進行布局。需要將父元素的 display 屬性設置為 table 和 vertical-align 設置為 middle。 ```css .container { display: table; } .item { display: table-cell; vertical-align: middle; /* 垂直居中 */ } ``` 3. 使用絕對定位 使用絕對定位可以將元素放置在父元素的中間。需要將元素的 top 和 margin-top 屬性設置為 50%，同時將元素的高度設置為父元素的高度的一半。 ```css .container { position: relative; } .item { position: absolute; top: 50%; margin-top: -25px; /* 需設置元素高度的一半 */ } ``` 4. 使用 transform 使用 transform 也可以將元素垂直居中。需要將元素的 position 屬性設置為 absolute 和 left 和 top 屬性設置為 50%，同時使用 transform: translate(-50%, -50%) 將元素居中。 ```css .container { position: relative; } .item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 垂直居中 */ } ``` 以上是常見的幾種 CSS 垂直居中方式。根據實際情況選擇最適合自己的方式來實現垂直居中。