div中心居中是指將一個(gè)div元素水平居中顯示在頁(yè)面上。通常情況下，div元素默認(rèn)會(huì)根據(jù)其父元素進(jìn)行相對(duì)布局，所以要實(shí)現(xiàn)中心居中，需要對(duì)div元素應(yīng)用適當(dāng)?shù)腃SS樣式。
下面是幾個(gè)常見(jiàn)的代碼案例，用來(lái)詳細(xì)解釋說(shuō)明如何實(shí)現(xiàn)div中心居中。
案例一：使用margin實(shí)現(xiàn)div水平居中

<div class="container">
<div class="centered">
<!-- 內(nèi)容 -->
</div>
</div>

CSS樣式：

.container {
text-align: center;
}
<br>
.centered {
display: inline-block;
}

使用上述代碼，我們將包裹div的父元素設(shè)置為text-align: center;，這樣div內(nèi)部的內(nèi)容就會(huì)水平居中。然后，通過(guò)給div元素添加display: inline-block;樣式，使其以塊級(jí)顯示，并且保持居中的效果。
案例二：使用flexbox實(shí)現(xiàn)div水平居中

<div class="container">
<div class="centered">
<!-- 內(nèi)容 -->
</div>
</div>

CSS樣式：

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

使用上述代碼，我們將包裹div的父元素設(shè)置為display: flex;，通過(guò)設(shè)置justify-content: center;和align-items: center;來(lái)實(shí)現(xiàn)內(nèi)容的水平和垂直居中。
案例三：使用絕對(duì)定位實(shí)現(xiàn)div水平居中

<div class="container">
<div class="centered">
<!-- 內(nèi)容 -->
</div>
</div>

CSS樣式：

.container {
position: relative;
}
<br>
.centered {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

使用上述代碼，我們將包裹div的父元素設(shè)置為position: relative;，然后給div元素添加position: absolute;，通過(guò)設(shè)置left: 50%;和transform: translateX(-50%);來(lái)使其水平居中。
這些代碼案例都可以幫助我們實(shí)現(xiàn)div中心居中的效果。實(shí)際上，還有許多其他方法可以實(shí)現(xiàn)相同的效果，選擇適合自己項(xiàng)目的方法即可。通過(guò)使用這些方法，我們可以輕松地將div元素水平居中，使頁(yè)面布局更加美觀和整潔。