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%); 

}