在屏幕上居中的div(已使用css3进行了旋转和缩放)

问题描述

我有以下jsfiddle:

I have the following jsfiddle:

https://jsfiddle.net/quacu0hv/

我不知道如何将这个div居中.它被旋转的事实使得很难将对象实际在屏幕上居中.用纯CSS怎么能做到这一点?我想像是由于原点改变了位置(div的左上角).

I cant figure out how to center this div. The fact that it is rotated makes it hard to actually center the object on screen. How exactly can this be achieved with pure css? I imagine its due to the point of origin that changed its position (upper left vertex of the 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 值，看看会发生什么；)

Try rearranging the transform values and see what happens ;)

结果顺序很重要.如果您考虑一下，它确实是有道理的:

Turns out order does matter. If you think about it, it does makes sense:

旋转>缩放>翻译

旋转后，原点也将旋转.这就是为什么正方形从原点开始向左移动和向上移动.

Once you've rotated it, the origin has been rotated too. That's why your square moves "left" and "up" from the origin.

翻译>旋转>缩放

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

This is what you want to do. Position before you make any other adjustments that can affect the origin.

这篇关于在屏幕上居中的div(已使用css3进行了旋转和缩放)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！