div當前居中是指將一個div元素在頁面中水平居中顯示。通常情況下，我們使用CSS樣式來實現這一效果。本文將使用幾個代碼案例來詳細說明如何實現div當前居中的效果。
在HTML中，<div>標簽用于創建一個可容納內容的區塊。這個區塊可以通過CSS樣式進行定位、調整大小、添加背景顏色等。要實現div當前居中，我們可以使用以下幾種方法。
方法一：使用text-align屬性 一種簡單的方法是將父元素的text-align屬性設置為center。這會使div元素及其所有子元素在水平方向上居中顯示。以下是一個示例代碼：

<style>
.container {
text-align: center;
border: 1px solid black;
}
</style>
<br>
<div class="container">
<p>這是一個居中顯示的div</p>
</div>

在上述代碼中，我們創建了一個類名為container的div元素。通過將container類應用于div標簽，我們定義了一個樣式，其中包括text-align屬性，將其設置為center。這將使div元素中的所有內容都在水平方向上居中對齊。這樣，該div將在頁面中居中顯示。
方法二：使用margin屬性 另一種常用的方法是使用margin屬性來實現div的當前居中。我們可以通過將左右margin設置為auto來實現這一效果。以下是一個示例代碼：

<style>
.container {
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
</style>
<br>
<div class="container">
<p>這是一個居中顯示的div</p>
</div>

在上述代碼中，我們使用margin-left和margin-right屬性，并將它們的值都設置為auto。這樣做可以使瀏覽器自動計算和分配左右兩側的空白，從而使div元素在水平方向上居中對齊。同樣，這將使div在頁面中居中顯示。
方法三：使用flexbox布局 Flexbox布局是一種非常強大的CSS布局方法，其中包括當前居中效果。我們可以使用display:flex和justify-content:center屬性來實現div的水平居中。以下是一個示例代碼：

<style>
.container {
display: flex;
justify-content: center;
border: 1px solid black;
}
</style>
<br>
<div class="container">
<p>這是一個居中顯示的div</p>
</div>

在上述代碼中，我們通過將display屬性設置為flex，使.container類的div元素成為flex容器。然后，通過將justify-content屬性設置為center，我們可以使容器內的所有子元素在水平方向上居中對齊。這將使div元素在頁面中水平居中顯示。
綜上所述，我們可以通過text-align屬性、margin屬性和flexbox布局來實現div的當前居中效果。根據具體的需求和布局結構，選擇適合的方法來實現所需的效果。無論您選擇哪種方法，都可以輕松實現div的當前居中。