在網(wǎng)頁(yè)設(shè)計(jì)中，我們常常需要讓圖片垂直居中對(duì)齊。在 CSS 中，這個(gè)過(guò)程需要通過(guò)一些技巧來(lái)實(shí)現(xiàn)。 首先，我們可以使用絕對(duì)定位和負(fù)邊距來(lái)將圖片垂直居中。假設(shè)我們有一個(gè)父元素div，如下所示：

<div>
<img src="example.jpg" alt="example">
</div>

下面的 CSS 代碼可以將圖片垂直居中：

div {
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這里，我們將父元素 div 的定位設(shè)置為相對(duì)定位。接著，將圖片絕對(duì)定位，并設(shè)置 top 屬性為 50%。這樣可以將圖片的上邊框移到容器中央。但是這樣只能將圖片的上邊界居中，我們還需要將整個(gè)圖片垂直居中。因此，我們需要使用 transform 屬性來(lái)沿著Y軸移動(dòng)圖像的位置。 transform: translateY(-50%); 表示將圖片沿著Y軸移動(dòng)50%，使圖片垂直居中。 同時(shí)需要注意，這種方法只適用于寬度和高度已知的容器。 第二種方法是使用 display: flex，這是最常用的方法。Flexbox 布局系統(tǒng)提供了一種簡(jiǎn)單的方法來(lái)對(duì)齊元素。與 table-cell 水平對(duì)齊不同，F(xiàn)lexbox 也支持垂直居中對(duì)齊。 下面的 CSS 代碼展示了如何使用 Flexbox 將圖片垂直居中：

div {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-height: 100%;
}

將父元素 div 的 display 屬性設(shè)置為 flex，align-items 設(shè)置為 center 將垂直方向?qū)R的方式指定為居中，justify-content 也設(shè)置為 center 將水平方向?qū)R方式指定為居中。 同樣需要注意的是，這種方法只適用于現(xiàn)代瀏覽器和支持 Flexbox 的設(shè)備。 總之，不同的情況和要求下，我們可以使用不同的 CSS 技巧將圖片垂直居中對(duì)齊，但我們需要根據(jù)實(shí)際情況進(jìn)行選擇和應(yīng)用。