CSS中的scale屬性能夠讓我們對元素進(jìn)行縮放操作來實(shí)現(xiàn)頁面的美化，而在使用scale屬性的時(shí)候，更多的時(shí)候，我們需要對元素進(jìn)行居中操作，今天我們就來探討一下CSS中scale居中的問題。

代碼如下：
transform: scale(0.5);
transform-origin: center center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(元素高度/2);
margin-left: -(元素寬度/2);

實(shí)現(xiàn)過程：

首先我們需要對元素進(jìn)行縮放操作，這個(gè)很簡單，只需要將元素的transform屬性設(shè)置為scale即可，如上代碼第一行中的scale(0.5)屬性就表示將元素縮小為原來的一半。

但縮放之后，由于元素大小已經(jīng)改變，所以我們需要重新對元素進(jìn)行定位操作。而這個(gè)位置的原點(diǎn)需要我們明確，這個(gè)原點(diǎn)就是我們的縮放中心點(diǎn)。

縮放中心定位

代碼第二行中的transform-origin屬性表示了縮放中心點(diǎn)的定位方式，而"center center"就表示了以元素的中心點(diǎn)作為縮放中心點(diǎn)。假設(shè)需要改為以左上角為縮放中心點(diǎn)，那么就可以將這一行代碼改為transform-origin:0 0。

元素的居中定位

接下來就是對元素進(jìn)行居中定位了，首先將元素的position屬性設(shè)置為absolute，然后再通過top，left屬性以及下面的margin-top和margin-left來實(shí)現(xiàn)元素的居中。

代碼最后兩行的margin-top: -(元素高度/2);以及margin-left: -(元素寬度/2);表示將元素的頂部上移動(dòng)高度的一半，左邊移動(dòng)寬度的一半，以此實(shí)現(xiàn)水平和垂直方向的居中。

以上就是關(guān)于CSS中scale居中的解釋，是不是其實(shí)并不難呢！