CSS 絕對劇中 在 Web 設計中，有時候我們需要將元素絕對劇中，而不是相對劇中。相對劇中是指元素在父元素中水平和垂直居中，而絕對劇中則是指元素在整個頁面中水平和垂直居中。本文將介紹如何使用 CSS 實現絕對劇中。 HTML 結構 首先，我們需要創(chuàng)建一個 HTML 頁面并添加一個需要居中的元素。下面是一個示例代碼：

<div class="box">
<p>這是一個需要居中的元素</p>
</div>

CSS 樣式 1. 將元素設置為絕對定位。

.box {
position: absolute;
top: 50%;
left: 50%;
}

我們設置 `.box` 元素的 `position` 屬性為 `absolute`，使其脫離文檔流并進行絕對定位。 2. 使用 `transform` 屬性以及 `translate` 函數進行偏移。

.box {
transform: translate(-50%, -50%);
}

由于我們已將元素的頂點和左側點都設為屏幕中心，所以我們需要使用 `transform` 屬性中的 `translate` 函數來水平和垂直偏移元素。`transform: translate(-50%, -50%)` 表示將元素水平和垂直方向都偏移元素本身寬度和高度的50%。 完整 CSS 樣式代碼：

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

通過上述代碼，我們可以實現絕對劇中元素。 總結 CSS 提供了眾多的方法來實現相對劇中和絕對劇中。通過上述代碼，我們可以簡單明了地實現絕對劇中，使元素始終居中于頁面。