css居中的元素旋转后不居中

在Web开发中，CSS居中元素是很常见的需求。但有时候我们会发现，当元素被旋转后，居中的效果可能会失效。下面是一个例子：

code>
div {
      width: 100px;
      height: 100px;
      background-color: #f00;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
}
    /code>
    

这段代码将一个红色正方形居中，并旋转了45度。但如果我们注意一下该元素在页面上的显示位置，就会发现它似乎并没有完全居中。

这是因为元素的旋转点默认是在元素的中心点，而不是它应该被居中的位置。这意味着，当元素被旋转时，它的中心点会发生改变，而不是保持在原来的位置。

那该如何解决这个问题呢？其实很简单，我们只需要在旋转前让元素的中心点先移动到应该被居中的位置即可。修改上面的代码，如下：

code>
div {
      width: 100px;
      height: 100px;
      background-color: #f00;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg) translate(50%, 50%);
}
    /code>
    

这里新增了一个 translate(50%, 50%) 将元素的中心点移动到其应该被居中的位置。这样一来，元素旋转后位置不会发生偏移，而仍然能够完全居中。

总之，我们需要记住的是，CSS元素旋转时，中心点可能会发生改变，因此需要先将中心点移动到元素应该被居中的位置，以实现完全的居中效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！