在 HTML 中，我們能夠使用 div 元素來分割網頁并進行定位。但在實際運用中，我們通常需要在 div 元素中放置其他 HTML 元素，并且要求它們在 div 元素內上下居中顯示。

<div style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
<p>這是一段居中顯示的文字</p>
<img src="image.png" alt="圖片" />
</div>

上述代碼中，我們使用了 flexbox 布局來實現 div 中元素的上下居中。具體實現如下：

• display: flex; 設置 div 元素為 flexbox 布局。
• align-items: center; 設置 div 元素內元素在縱向上居中顯示。
• justify-content: center; 設置 div 元素內元素在橫向上居中顯示。
• flex-direction: column; 設置 div 元素內元素沿縱向排列。

通過這些 CSS 屬性的運用，我們能夠輕而易舉地實現 div 中元素的上下居中。當然，還有其他的實現方式，如設置元素的 margin 或使用 table 布局等。不過相比之下，使用 flexbox 布局更為簡單且易于運用。因此，它在實際開發項目中也更加常見。