任何一個(gè)網(wǎng)站都會(huì)使用到div層，其中最常見(jiàn)的對(duì)于設(shè)計(jì)師來(lái)說(shuō)就是設(shè)計(jì)居中。那么如何使用CSS來(lái)實(shí)現(xiàn)呢？

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

以上是使用CSS居中的通用代碼，下面我們來(lái)講講為什么。

position: absolute

首先，我們需要將我們的div使用絕對(duì)定位，不管是單獨(dú)的一個(gè)層還是在容器中，都需要使用絕對(duì)定位。因?yàn)橹挥薪^對(duì)定位才可以使我們的div不受它的兄弟節(jié)點(diǎn)影響。

top: 50%andleft: 50%

我們將div層拉到頁(yè)面的中心位置，即使層的左上角在頁(yè)面中央。因此我們需要將層的上邊界和左邊界都移動(dòng)到50%的位置。

transform: translate(-50%, -50%)

由于層的上邊界和左邊界各自是50%的位置，我們需要偏移一半的寬度和高度才能實(shí)現(xiàn)完美居中。這就是transform: translate(-50%, -50%)的作用。它會(huì)將層的寬度高度的一半向“左上方”移動(dòng)。

現(xiàn)在，您已經(jīng)知道了如何通過(guò)CSS將div層垂直和水平居中，您可以放心地設(shè)計(jì)您的網(wǎng)站并使用此代碼。祝愉快！