div 塊居中在網頁布局中是一個非常常見的需求。當我們在設計網頁時，經常需要將一個div元素居中顯示，無論是在水平方向還是垂直方向。在本文中，我們將通過幾個具體的代碼案例來演示如何實現div塊的居中。
案例一：水平居中
要實現一個div元素在水平方向上居中，我們可以使用CSS的margin屬性，并設置左右邊距為"auto"。這將使得div元素兩側的邊距自動調整，使其水平居中。

html
<p>以下是一個示例，演示如何將一個div元素水平居中：</p>
<pre>
<div style="width: 400px; margin-left: auto; margin-right: auto; background-color: #f2f2f2;">
<p>這是一個居中顯示的div塊。</p>
</div>

在上面的示例中，我們給div元素設置了一個固定的寬度，并將左右邊距都設置為"auto"。這樣，div元素就會在水平方向上居中顯示。
案例二：垂直居中
要將一個div元素在垂直方向上居中，我們可以利用CSS的flex布局或者絕對定位。
使用flex布局的方式如下所示：
html

以下是一個示例，演示如何將一個div元素垂直居中：

<div style="display: flex; align-items: center; justify-content: center; height: 300px; background-color: #f2f2f2;">
<p>這是一個居中顯示的div塊。</p>
</div>

在上面的示例中，我們給父元素設置了display屬性為flex，然后使用align-items屬性和justify-content屬性將其內容在垂直和水平方向上都居中顯示。
如果你想要使用絕對定位的方式來實現垂直居中，可以使用以下的代碼：
`html

以下是一個示例，演示如何將一個div元素垂直居中：

<div style="position: relative; height: 300px; background-color: #f2f2f2;">
<div style="position: absolute; top: 50%; transform: translateY(-50%); width: 200px; background-color: #fff;">
<p>這是一個居中顯示的div塊。</p>
</div>
</div>

在上面的示例中，我們給父元素設置了position屬性為relative，并給子元素設置了position屬性為absolute。然后，使用top和transform屬性將子元素在垂直方向上居中顯示。
：
無論是在水平方向上還是垂直方向上居中，我們可以通過適當的CSS屬性來實現div塊的居中。在本文中，我們通過幾個具體的代碼案例來演示了水平居中和垂直居中的實現方式。希望這些示例能幫助你更好地理解和掌握div塊居中的方法。