屏幕上的中心 div 已使用 css3 旋转和缩放

我有以下 jsfiddle：

https://jsfiddle.net/quacu0hv/ https://jsfiddle.net/quacu0hv/

我不知道如何使这个 div 居中。事实上，它是旋转的，因此很难将对象真正置于屏幕上的中心。纯CSS到底是如何实现的呢？我想这是由于原点改变了它的位置（div的左上顶点）。

div {
  transform: rotate(-45deg) scale(2) translate(-50%, -50%);
  opacity: 1 !important;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: black;
  position: absolute;
}

尝试重新排列transform值并看看会发生什么；）

事实证明顺序确实很重要。如果你仔细想想，这确实是有道理的：

旋转 > 缩放 > 平移

一旦你旋转了它，原点也被旋转了。这就是为什么你的方块从原点“向左”和“向上”移动。

平移>旋转>缩放

这就是您想要做的。在进行可能影响原点的任何其他调整之前定位。