CSS中如何實現圖片縱向居中呢？這是很多網頁設計師頭疼的問題。下面我們來看看幾個實現方法。 方法一：使用絕對定位和負邊距 這個方法比較簡單，只需要在父容器中設置`position: relative`，在圖片上設置`position: absolute`，然后使用負邊距將圖片移動到中心位置即可。 ```.box { position: relative; height: 300px; } .box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 方法二：使用flex布局 flex布局是CSS3中新增的一種布局方式，可以很方便地實現圖片居中。在父容器中設置`display: flex`，然后使用`align-items`和`justify-content`屬性將內容居中。 ```.box { display: flex; align-items: center; justify-content: center; height: 300px; } .box img { max-height: 100%; max-width: 100%; } ``` 方法三：使用table布局 雖然table布局不是最好的選擇，但在某些場景下還是可以使用的。將父容器的`display`屬性設置為`table`，將圖片包裹在一個`table-cell`元素中，然后使用`vertical-align`屬性將圖片居中。 ```.box { display: table; height: 300px; } .cell { display: table-cell; vertical-align: middle; } .box img { margin: 0 auto; max-height: 100%; max-width: 100%; } ``` 以上是幾種實現圖片縱向居中的方法，根據實際情況選擇合適的方式即可。