CSS中居中是一個(gè)經(jīng)常會(huì)用到的樣式屬性，而全體居中則是其中比較特殊和常使用的一種。全體居中的作用就是讓元素在其父元素中水平和垂直居中，不管它在父元素中的位置如何，都能夠達(dá)到居中的效果。

.parent{
position: relative; /*相對(duì)定位*/
}
.child{
position: absolute; /*絕對(duì)定位*/
top: 50%; /*上部偏移50%*/
left: 50%; /*左部位移50%*/
transform: translate(-50%, -50%); /*以自身寬高的一半向左上位移*/
}

上面的代碼中，parent是父元素，child是需要居中的子元素。我們通過將父元素設(shè)置為相對(duì)定位，將子元素設(shè)置為絕對(duì)定位，并且上部偏移和左部偏移都為50%，使子元素到達(dá)其父元素中心點(diǎn)的位置。

但是，只應(yīng)用上述代碼會(huì)出現(xiàn)一個(gè)問題，當(dāng)子元素的寬度和高度大于其父元素時(shí)，顯然這種方法就無法完全居中了，因?yàn)樗皇且宰釉氐膶挾群透叨鹊囊话胂蜃笊戏狡啤Ｈ绻釉靥罅耍敲匆廊豢赡茉斐删又胁粶?zhǔn)確的問題。

針對(duì)這個(gè)問題，我們可以使用CSS3的transform屬性，將子元素向左上方平移自身寬度和高度的一半，這樣就可以達(dá)到完美的居中效果。

.parent{
position: relative; /*相對(duì)定位*/
}
.child{
position: absolute; /*絕對(duì)定位*/
top: 50%; /*上部偏移50%*/
left: 50%; /*左部位移50%*/
transform: translate(-50%, -50%); /*以自身寬高的一半向左上位移*/
}

綜上所述，全體居中是一種方便好用的樣式屬性，可以自適應(yīng)各種尺寸的屏幕和瀏覽器，為我們的網(wǎng)頁(yè)布局帶來更多選擇。希望以上內(nèi)容能對(duì)大家有所幫助。