<div> 字沉底是一種常見的 CSS 布局技巧，它可以讓一個元素水平居中，垂直沉底顯示在頁面中。通過指定相關的 CSS 屬性，我們可以輕松實現這一效果。在本文中，我們將探討如何使用 <div> 字沉底來實現水平居中和垂直沉底的布局效果。
，我們來看一個簡單的示例。假設我們有一個包含文本的 <div> 元素，我們希望實現它居中顯示并沉底。下面是我們可以使用的 CSS 代碼：

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
}

這里，我們使用position: absolute來使該元素脫離文檔流，并且可以通過指定精確的位置來定位。接著，我們使用top: 50%和left: 50%來將元素的左上角定位于屏幕的中心點。最后，我們使用transform: translate(-50%, 50%)將元素沿 x 軸向左偏移 50%，沿 y 軸向下偏移 50%，從而實現了元素水平居中和垂直沉底的效果。
除了使用絕對定位和 transform 屬性，我們還可以使用 flexbox 來實現 <div> 字沉底布局。下面是一個使用 flexbox 的示例：

.container {
display: flex;
justify-content: center;
align-items: flex-end;
}

在這個示例中，我們創建了一個包含所有需要居中和沉底的元素的容器。通過將容器的display屬性設置為flex，我們使其成為一個彈性容器。接著，我們使用justify-content: center將所有的元素水平居中對齊，使用align-items: flex-end將它們垂直對齊到容器的底部。這樣，我們就實現了 <div> 字沉底布局。
在實際應用中，我們可以根據具體的需求選擇合適的方案來實現 <div> 字沉底布局效果。無論是使用絕對定位和 transform 屬性，還是使用 flexbox，都能夠輕松實現水平居中和垂直沉底的效果。通過合理運用這些技巧，我們可以創建出精美而又實用的網頁布局。