CSS 'transform' 与 'position: absolute'

Question

有什么区别

position: absolute;
top: 50%;
left: 50%;

和

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

?

用什么比较好？

Answer 1

position: absolute;
top: 50%;
left: 50%;

这个对象是根据parent 元素放置的。它会根据 parent 的位置而改变。

---

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

这个对象是基于它自己的。如果移动对象，它将根据其新位置进行平移。

---

虽然两者可以在初始格式中显示相同的结果，但在设置 parent 元素样式时您会注意到明显的差异。