html – 位置绝对的transform-origin等价物

前端之家收集整理的这篇文章主要介绍了html – 位置绝对的transform-origin等价物前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

有没有办法单独使用CSS?

最佳答案
正如the comments中所指出的,您可以简单地使用transform:translate(-50%,– 50%)来垂直/水平居中元素.幸运的是,这种方法适用于动态值,这意味着它可以很好地适用于您的情况,因为您不知道元素的宽度/高度.

例如:

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

对于它的价值,这里有some alternative methods垂直/水平定心.

猜你在找的HTML相关文章