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

Question

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

当它设置正确时我很好:10%; 在桌面布局.但是当%的值时,移动设备会出现美学问题,因为宽度较小,它在中心看起来从未正确.

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

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

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

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

感谢您提前帮助!

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