<div>是HTML中常用的一個標簽，用于創建一個容器，將其他元素（如文本、圖像、表格等）組合在一起。在CSS中，我們可以通過給<div>標簽添加樣式來改變其外觀和布局。本文將介紹一些常用的<div> CSS模板，可以幫助開發者快速構建各種網頁布局。通過以下幾個代碼案例，我們將詳細解釋和說明這些模板的用法。

案例一：居中對齊

有時候我們希望將<div>中的內容在頁面中居中對齊。下面是一個簡單的示例：

<div class="center">
<p>這是居中對齊的文本</p>
</div>

在上述代碼中，我們添加了一個名為"center"的CSS類。接下來，在CSS樣式表中設置該類的屬性，使其在水平和垂直方向上居中對齊：

.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

上述代碼中的"flex"屬性將使<div>成為一個彈性容器，"justify-content"和"align-items"屬性分別用于水平和垂直方向上的對齊，"height"屬性則將<div>的高度設置為視口的高度。

案例二：網格布局

網格布局在現代網頁設計中越來越受歡迎，可以方便地創建多列布局。下面是一個示例：

<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

在上述代碼中，我們創建了一個名為"grid"的<div>容器，并在其中嵌套了三個<div>，它們具有相同的"class"屬性。接下來，我們在CSS樣式表中設置這些類的屬性，以創建一個網格布局：

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
<br>
.item {
background-color: lightgray;
padding: 20px;
}

上述代碼中的"display: grid"屬性將將<div>容器轉換為網格布局，"grid-template-columns"屬性指定了每列的寬度和數量，"grid-gap"屬性用于設置網格項之間的間隔。此外，我們還為網格項的類添加了背景顏色和內邊距。

案例三：響應式布局

在移動設備和不同屏幕尺寸上呈現的網頁越來越普遍，因此需要使用響應式布局來適應各種屏幕。下面是一個示例：

<div class="responsive">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

在上述代碼中，我們創建了一個名為"responsive"的<div>容器，并在其中嵌套了三個<div>，它們沒有指定任何類或屬性。接下來，我們在CSS樣式表中設置這些<div>的屬性，以創建一個響應式布局：

.responsive {
display: flex;
flex-wrap: wrap;
}
<br>
.responsive div {
width: 50%;
}
<br>
@media screen and (max-width: 600px) {
.responsive div {
width: 100%;
}
}

在上述代碼中，我們使用"display: flex"屬性將<div>容器轉換為彈性布局，并使用"flex-wrap"屬性將網格項折行。此外，我們使用@media查詢為小屏幕（寬度小于600px）下的網格項設置全寬度布局。

通過以上幾個代碼案例，我們介紹了一些常用的<div> CSS模板，包括居中對齊、網格布局和響應式布局。這些模板可以幫助開發者更快地創建各種網頁布局。通過靈活運用CSS屬性和樣式，我們可以實現豐富多樣的界面效果和用戶體驗。希望本文對您有所幫助！