<div>元素是HTML中最常用的元素之一，它的作用是將文檔劃分為獨立的區塊，使得我們能夠更好地布局和排版網頁內容。其中一個常見的需求是將<div>元素設置邊框，并使其居中顯示。本文將通過幾個代碼案例來詳細解釋如何實現<div>元素的居中顯示和邊框設置。

，我們可以通過以下代碼案例來解釋如何將<div>元素居中顯示。

<code>
<style>
.center-div {
width: 300px; /* 設置寬度 */
height: 200px; /* 設置高度 */
margin: 0 auto; /* 左右自動外邊距 */
background-color: #f2f2f2;
text-align: center;
line-height: 200px;
}
</style>
<br>
    <div class="center-div">
This is a centered DIV element.
</div>
</code>

在上述代碼案例中，我們通過給<div>元素添加一個類名(center-div)，并在樣式表中定義該類的樣式來實現居中顯示。具體來說，我們通過設置該元素的寬度和高度，以及將左右外邊距設為auto，來使該元素水平居中。此外，我們還將背景色設為淺灰色(#f2f2f2)，并設置文本居中顯示，使頁面看起來更加美觀。

接下來，我們將通過下面的代碼案例來解釋如何給<div>元素設置邊框。

<code>
<style>
.border-div {
width: 300px; /* 設置寬度 */
height: 200px; /* 設置高度 */
border: 1px solid #ccc; /* 設置邊框 */
}
</style>
<br>
    <div class="border-div">
This is a DIV element with border.
</div>
</code>

在上述代碼案例中，我們通過給<div>元素添加一個類名(border-div)，并在樣式表中定義該類的樣式來實現邊框效果。具體來說，我們通過設置該元素的寬度和高度，并使用border屬性來設置邊框樣式。在這里，我們將邊框樣式設置為1像素的實線邊框，顏色為#ccc。這樣，<div>元素就擁有了一個簡單的邊框。

綜上所述，通過以上兩個代碼案例，我們可以實現<div>元素的居中顯示和邊框設置。這些技巧可以幫助我們更好地布局和排版網頁內容，提升頁面的美觀性和用戶體驗。

參考文章：
- Example.com: <a target="_blank">https://www.example.com</a>
- W3Schools: <a target="_blank">https://www.w3schools.com</a>