CSS 整體水平居中顯示是許多 Web 設(shè)計(jì)人員和開(kāi)發(fā)人員經(jīng)常面對(duì)的問(wèn)題之一。在本文中，我們將向您展示幾種方法來(lái)幫助您輕松實(shí)現(xiàn)該效果。
首先，我們來(lái)看看最簡(jiǎn)單的方法。我們可以設(shè)置針對(duì)整個(gè)頁(yè)面的樣式，將頁(yè)面的寬度設(shè)置為固定值，并將左右外邊距設(shè)置為 auto。這樣就可以自動(dòng)將頁(yè)面水平居中。

body {
width: 960px;
margin: 0 auto;
}

但是這種方法只適用于具有固定寬度的布局，并且對(duì)于響應(yīng)式設(shè)計(jì)可能不是最佳選擇。現(xiàn)在讓我們看看如何使用 flexbox 和 text-align 屬性。

.container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.item {
/* styles for child elements */
}

這里我們創(chuàng)建了一個(gè)父級(jí)容器，容器使用 flexbox 布局。justify-content 屬性可以使其中的子元素在主軸上居中，align-items 可以使子元素在交叉軸上居中，使用 text-align: center 屬性則可以使容器內(nèi)的文本居中。如果我們?cè)谌萜鲀?nèi)包括其他元素，只需將其包裝在輔助類(lèi) .item 中即可。
除了 Flexbox，我們還可以使用 Grid 來(lái)實(shí)現(xiàn)整體水平居中。下面的代碼示例可用于在容器內(nèi)將元素居中。

.container {
display: grid;
place-items: center;
}
.item {
/* styles for child elements */
}

place-items 屬性可以使元素相對(duì)于網(wǎng)格線(xiàn)居中，對(duì)于多個(gè)子元素的布局效果非常棒。
最后，我們可以使用絕對(duì)定位來(lái)實(shí)現(xiàn)整體水平居中。這通常需要將元素設(shè)置為 position: absolute; 并使用 left 和 right 屬性設(shè)置元素的位置。

.container {
position: relative;
}
.item {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

這種方法僅適用于單個(gè)元素或簡(jiǎn)單的布局，如果布局更復(fù)雜，則可能需要使用更先進(jìn)的技術(shù)。
根據(jù)您的需求，選擇合適的 CSS 居中方法可以使您的網(wǎng)站或應(yīng)用程序看起來(lái)更美觀、更一致。