<div> 元素是 HTML 中一個非常重要的標簽，用于創建塊級元素或容器。通常情況下，<div> 元素使用 CSS 樣式來控制其外觀和行為。在本文中，我們將重點介紹如何使用 CSS 讓 <div> 元素在頁面中居中，并將其背景色設置為白色。
在 CSS 中，要使一個 <div> 元素水平居中，我們可以使用以下代碼：

方法一：

div {
margin: 0 auto;
background-color: white;
}

在上述代碼中，我們使用了 margin 屬性，并將左右邊距都設置為 auto。這樣一來，<div> 元素就會相對于其父級居中。同時，我們還設置了背景顏色為白色，以實現白底的效果。
還有另一種方法可以實現水平居中，我們可以使用 flex 布局來實現：

方法二：

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

在這個例子中，我們將 <div> 元素的顯示屬性設置為 flex，并使用 justify-content 屬性將子元素水平居中，使用 align-items 屬性將子元素垂直居中。
除了水平居中，我們還可以使用以下代碼實現垂直居中的效果：

方法三：

div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
}

在這個例子中，我們將 <div> 元素的定位屬性設置為 absolute，然后使用 top 和 left 屬性將其位置設置為頁面的一半。接下來，我們使用 transform 屬性將元素向左上方移動自身寬度和高度的一半，從而實現垂直居中的效果。
現在讓我們參考一些真實案例，看看如何在實際中應用這些方法。
案例一： 假設我們有一個登錄頁面，其中包含一個登錄框。我們希望登錄框在頁面水平居中，并且背景為白色。
HTML 代碼：

<div class="login-box">
<form>
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼">
<button>登錄</button>
</form>
</div>

CSS 代碼：

.login-box {
margin: 0 auto;
background-color: white;
}

在這個案例中，我們使用了方法一中的代碼，將 .login-box 類的 <div> 元素水平居中，并設置背景色為白色。
案例二： 假設我們有一個圖片展示頁面，我們希望圖片在頁面垂直居中，并且背景為白色。
HTML 代碼：

<div class="image-wrapper">
<img src="image.jpg" alt="圖片">
</div>

CSS 代碼：

.image-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
}

在這個案例中，我們使用了方法三中的代碼，將圖片的父級 <div> 元素垂直居中，并設置背景色為白色。
通過以上的例子，我們可以看到使用 <div> 元素以及 CSS 樣式可以很方便地實現居中和設置背景色的效果。無論是登錄框還是圖片展示頁面，我們都可以使用類似的方式來讓元素在頁面中居中，并將其背景色設置為白色。這樣能夠提升頁面的可讀性和美觀性，給用戶更好的瀏覽體驗。