<div>上下左右居中是指將一個<div>元素在其父元素中居中顯示，無論是垂直居中還是水平居中。這在網頁布局中經常使用，特別是在響應式設計中，以確保元素的位置始終處于屏幕的中心位置。本文將通過幾個代碼案例來詳細說明如何實現<div>上下左右居中的效果。

垂直居中

要實現<div>在垂直方向上居中，可以使用以下代碼：

.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<br>
.child {
/* 其他樣式屬性 */
}

上述代碼中，.parent是父元素的類名，.child是子元素的類名。通過設置display: flex;，父元素將變為彈性盒子。使用align-items: center;可以使子元素在垂直方向上居中顯示。

這種方式適用于父元素的高度已知的情況，例如設置為height: 100vh;以占滿整個視口。

水平居中

要實現<div>在水平方向上居中，可以使用以下代碼：

.parent {
display: flex;
justify-content: center;
/* 其他樣式屬性 */
}
<br>
.child {
/* 其他樣式屬性 */
}

上述代碼中，.parent是父元素的類名，.child是子元素的類名。通過設置display: flex;，父元素將變為彈性盒子。使用justify-content: center;可以使子元素在水平方向上居中顯示。

上下左右居中

要實現<div>在上下左右居中，可以使用以下代碼：

.parent {
position: relative;
height: 100vh;
}
<br>
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 其他樣式屬性 */
}

上述代碼中，.parent是父元素的類名，.child是子元素的類名。通過設置position: relative;，父元素變為相對定位的容器。子元素使用position: absolute;進行絕對定位，top: 50%; left: 50%;將子元素的左上角定位于父元素的中心點位置。最后，使用transform: translate(-50%, -50%);將子元素向左上方移動自身寬高的一半，以實現居中效果。

綜上所述，<div>上下左右居中是一種常見的網頁布局需求。通過靈活運用CSS的屬性和值，可以輕松實現這一效果，使網頁布局更加美觀和易讀。