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

I have an slider, which include navigation dots positioned by absolute value. And I want to know how to center those dots by X axis.

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

Im fine when it's set right: 10%; at the desktop layout. But mobile have an esthetic issues when the values in %, it just never looks right in the center because of small width.

如果设置正确，我很好:10%;在桌面布局。但是移动设备在%值时存在着美学问题，因为它的宽度很小，所以永远不会在中间显示出来。

I have searched a lot, and most popular solution was

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

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

But still it works just as left.. Please have an look on jsfiddle code below, I need space between 2nd and 3rd white dot to be cut by white vertical line.

但它仍然像左一样工作。请查看下面的jsfiddle代码，我需要在2 - 3白点之间的空间被白色垂直线切割。

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

Thank you for helping in advance!

感谢您的帮助!

2 个解决方案

#1

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

transform:translateX(-50%); is what you're looking for.

变换:translateX(-50%);这就是你想要的。

Notice when you apply transform:translateX(-50%); it shifts the element by a percentage of the element's dimensions, in this case the width because it's an X axis translate, 50% because we specified it and to the left because it's a negative value.

应用转换时请注意:translateX(-50%);它移动元素的尺寸的百分比，在这种情况下宽度因为它是X轴平移，50%因为我们指定了它在左边因为它是一个负值。

I added it in both the middle dots div and the middle white line:

我把它加到中间的圆点和中间的白线上:

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

If you need vertically centered dots too, you can go with this https://jsfiddle.net/vk9oc6gt/4/ using:

如果您也需要垂直中心点，可以使用https://jsfiddle.net/vk9oc6gt/4/使用:

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

#2

-1

why dont u use this? - .owl-dots{width: 100%, text-align:center; left:0;}

你为什么不用这个?- .owl-dots {宽度:100%,text-align:中心;左:0;}

#1