<div>是HTML中的一個標簽，用于創建一個容器來包含其他HTML元素。常常使用<div>標簽來布局網頁或創建網頁的不同部分。在布局網頁時，一個常見的需求是讓<div>元素在頁面中居中對齊。通過使用CSS樣式，我們可以實現<div>元素的水平居中對齊和垂直居中對齊的效果。
要實現<div>元素的水平居中對齊，我們可以使用以下代碼：

<pre>
<div class="container">
<div class="centered-div">
<p>This is a centered div.</p>
</div>
</div>
<br>
<style>
.container {
display: flex;
justify-content: center;
}
<br>
.centered-div {
text-align: center;
}
</style>

在上述代碼中，我們創建了一個名為"container"的<div>元素，它作為一個父級容器。然后，我們在這個容器中創建了一個名為"centered-div"的<div>元素，它是我們要居中對齊的元素。通過設置容器的CSS樣式"display: flex; justify-content: center;"，我們可以使<centered-div>元素在水平方向上居中對齊。接下來，在<centered-div>元素的CSS樣式中，我們將文本的對齊方式設置為居中(text-align: center;)，從而使文本在<div>元素內部水平居中。
要實現<div>元素的垂直居中對齊，我們可以使用以下代碼：

<pre>
<div class="container">
<div class="centered-div">
<p>This is a centered div.</p>
</div>
</div>
<br>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
<br>
.centered-div {
text-align: center;
}
</style>

在上面的代碼中，我們基本上做了與水平居中對齊相同的設置，但有一些額外的內容。，我們在容器的CSS樣式中添加了"align-items: center;"，它將使<div>元素在垂直方向上居中對齊。，我們指定了容器的高度為200像素(height: 200px;)，這是因為要使<div>元素垂直居中對齊，父級容器的高度必須被指定。
以上這些代碼示例展示了如何通過使用CSS樣式以及<div>元素的嵌套結構實現<div>元素的水平居中對齊和垂直居中對齊。這些技術可以在網頁布局和設計中非常有用，使得我們可以更好地控制和調整元素的排列方式，提升用戶體驗和頁面的美觀性。使用這些對齊技巧，無論是在構建響應式網站還是其他類型的網頁中，都能夠更好地滿足用戶的需求和期望。