CSS 是一種強大的語言，可以幫助我們設計網頁，其中一項重要的功能是布局。在頁面設計中，很多時候需要在背景上添加圖片，而且希望圖片能夠垂直居中。今天，我們就來學習如何使用 CSS 實現這個功能。

首先，我們需要使用

background-position

屬性來控制背景圖片的位置。常用的值有幾種：

background-position: center top; /* 圖片居中，頂部對齊 */
background-position: center center; /* 圖片完美居中 */
background-position: center bottom; /* 圖片居中，底部對齊 */

接下來，我們定義一個容器來包裹背景圖片，然后設置它的高度和背景圖片的 url：

.container {
height: 300px; /* 假設容器高度是 300px */
background-image: url('example.jpg');
background-repeat: no-repeat;
background-position: center center; /* 讓背景圖片居中 */
}

如果我們只是想讓背景圖片在容器中居中而已，現在已經做到了。但是，如果我們想要讓容器中的文本也能夠垂直居中，該怎么辦呢？這時候，我們需要使用 flex 布局。

將容器的

display

屬性設置為

flex

，然后定義

align-items

為

center

，就可以讓容器中的文本垂直居中了：

.container {
height: 300px; /* 假設容器高度是 300px */
background-image: url('example.jpg');
background-repeat: no-repeat;
background-position: center center; /* 讓背景圖片居中 */
display: flex; /* 將容器設置為 flex 布局 */
align-items: center; /* 讓容器中的元素垂直居中 */
}

現在，我們就成功地實現了背景圖片上下居中的效果了。