Css 以响应方式居中滑块控制

我想将您可以找到的滑块控件居中

我尝试了各种方法，比如

右：0；左：0；左边距：自动；右边距：自动

和两个以上

但不知何故，我无法使它以响应的方式居中，以便在任何视口中，它始终保持居中

---

那么，有没有办法实现这一点呢？

看起来，当它们被放入移动设备时，它们只是被隐藏了起来。您可以将其重新显示在小（移动）屏幕的媒体查询中

---

将滑块控件放在一个div中，该div具有

宽度：100%

，并且其内容设置为

文本对齐：居中

。将div绝对值定位在底部：20px（调整此值以设置与底部的所需偏移）。最后，包含滑块控件div的容器需要设置为

位置：relative

div.slider-controls {
  width:100%;
  text-align:center;
  position: absolute;
  left: 0px;
  bottom: 20px;     <----- adjust this until you
}                          like the offset from the
                           bottom of the slider

div.slider-container {
  position: absolute;
}

div.slider-controls{
宽度：100%；
文本对齐：居中；
位置：绝对位置；
左：0px；
底部：20px；这将使控件居中，无需使用宽度，但只适用于现代浏览器：

.anythingSlider-minimalist-round .anythingControls {
  position: absolute;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
}

此方法适用于较旧的浏览器，但需要固定的宽度：

.anythingSlider-minimalist-round .anythingControls {
  position: relative;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  bottom: 5%;
  width: 190px;
  margin: 0px auto;
}

还有一些其他方法可以使div在页面上居中，在这里看一些其他方法可能是值得的：
您尝试了哪些代码？例如，JSFiddle对我来说有点困难。我给出了我的站点的链接。它对您有帮助吗？您想使用宽度吗？它应该在什么浏览器中工作？
.anythingSlider-minimalist-round .anythingControls {
  position: relative;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  bottom: 5%;
  width: 190px;
  margin: 0px auto;
}