位置绝对的变换原点等价物

Question

我得到了一个大小未知的元素,其中position = absolute,top = 1000,left = 1000.

现在,该元素的左上角位于(1000,1000),但我希望元素的中心为(1000,1000).

有没有办法单独使用CSS？

Answer 1

如评论中所指出的，您可以简单地使用transform: translate(-50%,-50%)以便将元素垂直/水平居中。幸运的是，此方法适用于动态值，这意味着，由于您不知道元素的宽度/高度，因此该方法在您的情况下效果很好。

例如：

.element {
  background: #f00;
  width: 100px;
  height: 100px;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

<div class="element"></div>

值得一提的是，这里有一些用于垂直/水平居中的替代方法。