網(wǎng)頁設(shè)計(jì)中，圖片是經(jīng)常使用到的元素之一，而對于圖片的垂直居中對于網(wǎng)頁布局來說也是十分重要的一個(gè)問題。下面介紹如何使用 CSS 讓圖片永遠(yuǎn)上下居中。

首先，我們需要使用一個(gè)容器來包裹圖片，這個(gè)容器需要設(shè)置一定的高度和寬度。然后，在容器內(nèi)部創(chuàng)建兩個(gè)元素，一個(gè)是用來占位的空元素，另一個(gè)是用來展示圖片的 img 元素。

<div class="container">
<div class="placeholder"></div>
<img src="your_image_src">
</div>

接下來，我們需要使用 CSS 來給這兩個(gè)元素設(shè)置樣式。讓我們先來看一下占位元素的 CSS：

.placeholder {
height: 100%;
width: 100%;
}

這里，我們設(shè)置了占位元素的高度和寬度都為 100%，這樣可以保證容器的高度和寬度不會(huì)被這個(gè)元素?fù)纹啤?/p>

然后，我們來看一下圖片元素的 CSS：

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

首先，我們將 img 元素的 position 屬性設(shè)置為 absolute，這樣可以讓它脫離文檔流，并且不會(huì)對其他元素進(jìn)行影響。然后，我們使用 top 屬性將它的上邊距設(shè)置為容器的中心位置，也就是 50%。最后，使用 transform 屬性將它向上移動(dòng)自身高度的一半，從而實(shí)現(xiàn)垂直居中的效果。

這樣，我們使用 CSS 成功地讓圖片永遠(yuǎn)上下居中了。同時(shí)，如果需要水平居中也可以添加 marginLeft 和 marginRight 屬性即可。