div 對外居中是指將一個 div 元素在其父元素中水平居中或垂直居中的布局方法。在網頁設計中，經常需要將某個元素居中顯示，這樣可以使頁面看起來更加美觀和統一。下面將通過幾個代碼案例來詳細解釋如何實現 div 對外居中的效果。
案例一：水平居中 假設有一個 div 元素，寬度為200px，要使其在父元素中水平居中顯示，可以通過以下代碼實現：
\

html
<p>
<div class="centered-div">
這是一個水平居中的 div 元素
</div>
</p>
<p>
<style>
.centered-div {
width: 200px;
margin-left: auto;
margin-right: auto;
}
</style>
</p>
\

在上述代碼中，通過設置 .centered-div 的左右外邊距為 auto 來實現水平居中。由于 margin-left 和 margin-right 都設置為 auto，瀏覽器會自動計算出合適的外邊距使元素水平居中。
案例二：垂直居中 要使一個 div 元素在其父元素中垂直居中顯示，可以通過以下代碼實現：
\

html
<p>
<div class="centered-div">
這是一個垂直居中的 div 元素
</div>
</p>
<p>
<style>
.centered-div {
width: 200px;
height: 200px;
margin-top: auto;
margin-bottom: auto;
}
</style>
</p>
\

在上述代碼中，通過設置 .centered-div 的上下外邊距為 auto 來實現垂直居中。由于 margin-top 和 margin-bottom 都設置為 auto，瀏覽器會自動計算出合適的外邊距使元素垂直居中。
案例三：水平垂直居中 如果要同時使一個 div 元素在其父元素中水平居中和垂直居中顯示，可以通過以下代碼實現：
\

html
<p>
<div class="centered-div">
這是一個水平垂直居中的 div 元素
</div>
</p>
<p>
<style>
.centered-div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</p>
\

在上述代碼中，通過設置 .centered-div 的 position 為 absolute，并設置 left 和 top 為 50%，再結合 transform 屬性的 translate 函數來實現水平和垂直居中。translate(-50%, -50%) 的作用是將元素的中心點移動到父元素的中心點。
： 通過上述案例的介紹，我們可以了解到如何使用 CSS 來實現 div 對外居中的效果。對于水平居中，可以通過設置外邊距為 auto；對于垂直居中，可以通過設置上下外邊距為 auto；對于同時水平和垂直居中，可以通過定位和變換來實現。在實際項目中，根據具體需求選擇適合的方法來實現 div 對外居中是非常重要的，它可以為頁面設計帶來更好的效果和用戶體驗。