transform的优点
那么我们为什么要使用transform来实现垂直居中呢？
因为transform属于合成属性，而margin-top和top属于布局属性。对于合成属性，浏览器会将被动画元素放入一个独立的层中进行动画，而不会对整个页面进行重绘，这可以提高页面的性能。而对于布局属性，任何一点的变化都可能导致整个页面的重排和重绘，这会对页面的性能产生很大的影响。
如果我们使用margin-top或者top来实现垂直居中，那么每次元素发生变化时，浏览器都会对整个页面进行重排和重绘，这会导致页面的性能受到很大的影响。而使用transform来实现垂直居中，则可以将元素放入一个独立的层中进行动画，避免了对整个页面的重排和重绘，从而提高了页面的性能。
下面是一个使用transform实现垂直居中的示例代码：
// 外部容器
.container {
position: relative;
}
// 需要居中的内容
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
