<div> 標簽是 HTML 中用來創建一個容器的元素，常用于布局和定位元素。在 web 開發中，經常會遇到需要將一個元素垂直居中的需求，這對于開發者來說是一個相對復雜的問題。為了實現元素的垂直居中，我們可以使用一些 CSS 技巧和技術。在本文中，我們將重點討論使用 <div> 標簽來實現垂直居中的樣式。

一、使用 flexbox 實現垂直居中

Flexbox 是 CSS3 提供的一種布局模型，它可以使容器中的元素在水平和垂直方向上都能實現靈活的布局效果。在實現元素的垂直居中時，我們可以利用 flexbox 的屬性來實現。

.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.centered-element {
/* 元素的樣式 */
}

上述代碼中，我們通過為容器設置 display: flex 屬性，使容器成為一個 flex 容器。然后使用 align-items 屬性將容器中的元素在垂直方向上居中，使用 justify-content 屬性將元素在水平方向上居中。最后，我們可以為元素設置相應的樣式來實現垂直居中。

二、使用 position 和 transform 實現垂直居中

另一種實現垂直居中的方式是使用 position 和 transform 屬性。這種方法需要將元素設置為絕對定位，并使用 top、left、right 和 bottom 屬性來調整元素的位置。

.container {
position: relative;
height: 100vh;
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 其他樣式 */
}

以上代碼中，我們通過將容器的 position 屬性設置為 relative，使其成為容器內絕對定位元素的參考點。然后在元素的樣式中，通過設置 top 和 left 屬性為 50%，使元素的左上角與父容器的中心對齊。最后，通過使用 transform 屬性和 translate 函數將元素的位置調整到其自身尺寸的中心點。

三、使用 table-cell 實現垂直居中

除了以上兩種方法，我們還可以使用表格布局的方式實現垂直居中。這種方法使用了 display: table-cell 屬性，將容器視為一種表格布局。

.container {
display: table-cell;
vertical-align: middle;
height: 100vh;
}
.centered-element {
/* 其他樣式 */
}

在上述代碼中，我們將容器的 display 屬性設置為 table-cell，并使用 vertical-align 屬性將元素在垂直方向上居中。需要注意的是，我們還需要為容器設置固定高度以使其生效。

：

在本文中，我們討論了使用 <div> 標簽來實現垂直居中的樣式。我們介紹了使用 flexbox、position 和 transform、以及 table-cell 這三種方式來實現垂直居中的效果。這些方法都有自己的優缺點，開發者可以根據具體的需求選擇合適的方法來實現垂直居中。無論是哪種方式，都能夠很好地幫助開發者實現元素的垂直居中效果。

參考文章：

1. <a >Centering in CSS: A Complete Guide</a>

2. <a >Absolute Horizontal And Vertical Centering In CSS</a>

更多相關文章和具體代碼示例，請參考以上文章。