Html 如何居中定位：响应布局中的绝对元素

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

如果设置正确，我很好：10%；在桌面布局。 但是移动设备有一个美学问题，因为它的宽度很小，所以当它的值为%时，它的中心看起来永远都不对

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

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

但它仍然和左边一样有效。。请看下面的JSFIDLE代码，我需要第二个和第三个白点之间的空间被白色垂直线切割

谢谢你的帮助

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%);
}

如果您也需要垂直居中的点，您可以使用：

你为什么不用这个<代码>猫头鹰点{宽度：100%，文本对齐：居中；左：0；}

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