在制作網頁的過程中，經常需要設置圖片垂直居中。下面我們將介紹如何使用CSS實現位置圖片垂直居中。 首先，我們需要在HTML文檔中插入一張圖片，如下所示：

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

接下來，我們可以將圖片包含在一個div容器中，并對該容器進行樣式設置，使得圖片能夠垂直居中。

<div class="image-container">
<img src="example.jpg" alt="example">
</div>

然后，在CSS文件中定義.image-container的樣式：

.image-container {
display: flex;
justify-content: center;
align-items: center;
}

上述代碼中，display屬性設置為flex，允許child elements作為flex items，同時justify-content和align-items屬性都設置為center，分別實現水平和垂直居中。 值得注意的是，使用flexbox布局的前提是需要確保兼容性，可通過Can I Use網站查詢各瀏覽器的支持情況。 綜上，通過HTML和CSS中的相關設置，我們可以實現圖片垂直居中的效果，提升網頁的視覺效果和用戶體驗。