如何在响应式布局中居中定位绝对定位元素

Question

我有一个滑块，其中包括由绝对值定位的导航点。我想知道如何通过X轴居中这些点。

当它设置正确时，即桌面布局下设置为10％，我很满意。但是在移动设备上，由于宽度较小，使用百分比值时会出现美学问题，它永远无法在中心正确显示。

我搜索了很多，最流行的解决方案是：

left: 50%;
right: 50% transform: translateX(50%);

但它仍然像左侧一样工作。请查看下面的jsfiddle代码，我需要第二个和第三个白点之间的空间被白色垂直线切断。

https://jsfiddle.net/dpmango/vk9oc6gt/2/

提前感谢您的帮助！

- Sergey Khmelevskoy

Answer 1

https://jsfiddle.net/vk9oc6gt/3/

transform:translateX(-50%); 是你需要的内容。

请注意，当您应用 transform:translateX(-50%); 时，它会将元素移动一定百分比的元素尺寸，在这种情况下是宽度，因为它是X轴变换，我们指定了50%，并且向左移动，因为它是负值。

我在中间点和中间白线两个div中添加了它：

.center-line {
  position: absolute;
  background-color: white;
  top: 0;
  left: 50%;
  transform:translateX(-50%);
  width: 2px;
  height: 100%;
}

.owl-dots {
  display: inline-block;
  position: absolute;
  top: 80px;
  left:50%;
  transform:translateX(-50%);
}

如果你需要垂直居中的点，可以使用这个 https://jsfiddle.net/vk9oc6gt/4/，它使用以下代码：

top:50%;
left:50%;
transform:translate(-50%, -50%);

- fnune

Answer 2

为什么不使用这个？-.owl-dots{width: 100%, text-align:center; left:0;}

- firstTimeAnswering