<div center布局是一種常用的網頁布局技術，主要用于將頁面中的元素居中顯示。通過使用div元素和CSS樣式，可以實現水平居中、垂直居中或同時實現水平垂直居中。下面將通過幾個代碼案例詳細解釋說明div center布局的用法。
，我們來看一個簡單的水平居中的實例。在HTML代碼中，我們創建一個div元素，并給它一個固定的寬度和高度，并設置它的display屬性為flex。通過設置justify-content屬性為center，可以使div元素水平居中顯示。相關的CSS代碼如下：

div {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}

這樣，div元素就會在頁面中水平居中顯示。接下來，我們來看一個垂直居中的實例。在HTML代碼中，我們創建一個div元素，并設置它的display屬性為flex。通過設置align-items屬性為center，可以使div元素垂直居中顯示。相關的CSS代碼如下：

div {
display: flex;
align-items: center;
}

這樣，div元素就會在頁面中垂直居中顯示。如果我們希望同時實現水平垂直居中，可以結合之前的兩個實例。在HTML代碼中，我們創建一個div元素，并設置它的display屬性為flex。通過設置justify-content屬性和align-items屬性均為center，可以使div元素水平垂直居中顯示。相關的CSS代碼如下：

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

這樣，div元素就會在頁面中同時水平垂直居中顯示。需要注意的是，以上實例中的div元素只是示意，實際上可以放置任意其他元素，如文字、圖片、按鈕等。
參考其他文章的真實案例，我們可以更加深入地理解div center布局的應用。例如，在一個實際項目中，可能需要將頁面中的一個圖片居中顯示。在HTML代碼中，我們可以使用div元素包裹img元素，并設置div元素的display屬性為flex，通過設置justify-content屬性和align-items屬性同時為center，實現圖片的水平垂直居中顯示。相關的HTML和CSS代碼如下：

<div class="image-container">
<img src="example.jpg" alt="Example Image">
</div>
<br>
.image-container {
display: flex;
justify-content: center;
align-items: center;
}

通過以上方法，可以方便地實現圖片在頁面中的居中顯示。
來說，div center布局是一種常用的網頁布局技術，可以實現元素的水平居中、垂直居中或同時實現水平垂直居中。通過使用div元素和CSS樣式，我們可以靈活地應用div center布局到頁面中的不同元素上，從而實現美觀的頁面布局效果。希望通過本文的介紹和示例代碼，讀者可以更好地理解和應用div center布局技術。