css - 绝对定位的 div 中的中心元素

我有以下 HTML:

<div id="hasToBeAbsolute">
  <a></a>
  <a></a>
  <a></a>
</div>

样式如下:

#hasToBeAbsolute {
  position: absolute;
  display: table;
  margin: 10px auto 0;
}

#hasToBeAbsolute a {
    background: rgba(200, 200, 200, 0.8);
    margin-left: 10px;
    width: 12px;
    display: block;
    float: left;
    height: 12px;
    font-size: 0;
    border-radius: 50%;
}

codepen

我想将 div like this 中的 3 个“a”标签居中

但是我有以下限制:

外包装器必须绝对定位

我只能使用 LESS/CSS。

我无法添加或删除任何 HTML。

容器的宽度必须保持动态(“a”标签可以通过 JS 添加或删除)

这可能吗？

最佳答案

将此添加到您的代码中，它将起作用:

#hasToBeAbsolute {
...
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

(你也可以选择更小的宽度)

演示:http://codepen.io/anon/pen/jWVbQy

来自:https://stackoverflow.com/a/8273750/4339170

没有固定 width 的其他选项:

#hasToBeAbsolute {
...
  left: 50%;
  transform: translate(-50%, 0);
}

http://codepen.io/anon/pen/XXNmOE

来自:https://stackoverflow.com/a/23384995/4339170

关于css - 绝对定位的 div 中的中心元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34499407/