transform的優(yōu)點
那么我們?yōu)槭裁匆褂胻ransform來實現(xiàn)垂直居中呢锰镀？
因為transform屬于合成屬性，而margin-top和top屬于布局屬性垛吗。對于合成屬性，瀏覽器會將被動畫元素放入一個獨立的層中進行動畫，而不會對整個頁面進行重繪狸剃，這可以提高頁面的性能。而對于布局屬性狗热，任何一點的變化都可能導(dǎo)致整個頁面的重排和重繪钞馁，這會對頁面的性能產(chǎn)生很大的影響。
如果我們使用margin-top或者top來實現(xiàn)垂直居中匿刮，那么每次元素發(fā)生變化時指攒，瀏覽器都會對整個頁面進行重排和重繪，這會導(dǎo)致頁面的性能受到很大的影響僻焚。而使用transform來實現(xiàn)垂直居中允悦，則可以將元素放入一個獨立的層中進行動畫，避免了對整個頁面的重排和重繪虑啤，從而提高了頁面的性能隙弛。
下面是一個使用transform實現(xiàn)垂直居中的示例代碼：
// 外部容器
.container {?
??position: relative;?
}?
// 需要居中的內(nèi)容
.box {?
??position: absolute;?
??top: 50%;?
??left: 50%;?
??transform: translate(-50%, -50%);?
}?
