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

Question

我有以下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“标签居中

但是我有以下限制：

1. 外包装必须绝对定位
2. 我只能使用LESS / CSS。
3. 我无法添加或删除任何HTML。
4. 容器的宽度必须保持动态（“a”标签可以通过JS添加或删除）

这可能吗？

Answer 1

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

#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