从中间而不是边缘绝对位置 div

Question

我有一个绝对定位的 div 可变宽度，我想将其定位在父（相对）div 内的某个 x 位置。我可以通过设置

来做到这一点

left: 50px

但是我希望元素以 50px 标记为中心，而不是让它的左边缘或右边缘位于 50px。我可以通过 javascript 获取宽度并手动设置它来做到这一点，但是有没有办法只使用 CSS 来做到这一点？（最好不要使用转换和其他更新的功能，尽管我会尽我所能）

Answer 1

是的。

您仍然可以使用 left:50px 但添加

transform:translateX(-50%);

这会将元素向后拖动其自身宽度的 50%。不管那是什么。

Answer 2

只需使用变换属性将元素 "translate" 向左移动其宽度的 50%：

.element {
    position: absolute;
    left: 50px;
    transform: translateX(-50%);
}

Answer 3

div {
  position: absolute;
  left: 50px; transform: translate3d(-50%,0,0);
  top:0;
  border: 1px solid #000;
  width: 100px; height: 100px;
  }

<div>
  </div>

position absolute div from middle instead of edges