如何对位置进行中心:响应式布局中的绝对元素

Question

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

我很好，当它是正确的: 10%；在桌面布局。但是移动有一个美学问题，当在%中的值，它只是看不对在中间，因为小宽度。

我找了很多，最流行的解决方案是

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

但它还是像左边一样起作用。请看一下下面的篡改代码，我需要第二和第三个白点之间的空间被白色垂直线切割。

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

谢谢你提前帮忙！

Answer 1

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

transform:translateX(-50%);是你要找的东西。

注意，当您应用transform:translateX(-50%);时，它将元素移动到的一定百分比--元素的维度，在本例中，宽度是X轴的平移，50%是因为我们指定了它，另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%);

Answer 2

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