在绝对定位的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%;
}

我希望将

中的三个“a”标签居中，像这样。

但是我有以下限制：

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

这可能吗？

codepen

- HelloWorld

---

可能是重复的问题：如何在 div 中居中绝对定位的元素？ - Asons

Answer 1

将以下代码添加到您的程序中即可使其正常工作：

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

你也可以选择更小的宽度

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

来自: https://dev59.com/BnI-5IYBdhLWcg3wlpiW#8273750

---

没有固定 width 的其他选项：

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

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

来自：https://dev59.com/BnI-5IYBdhLWcg3wlpiW#23384995

- CoderPi

---

@LGSon 因为我想展示适配选项，而且我也想自己学习如何做到这一点，所以我这样做了。此外，这个问题并不完全与其他帖子中的问题相同。但是如果您删除-1，我会投票支持重复。 - CoderPi

然后您将答案发布为社区维基，明确说明为什么要发布以及重复内容中缺少的内容，其他所有内容都在重复内容中。 - Asons

我想提一下，在所提到的 SO（即 Stack Overflow） 帖子中，问题是不同的，我接受的解决方案并不是另一个帖子中被接受的答案（我不认为这是重复，因为问题是不同的）。 - HelloWorld

@LGSon 我之前在这里寻找解决方案时，并没有找到你所谓的“重复”，因为它涉及到不同的问题，而且没有我提到的限制条件。有时候同样的解决方案适用于多个问题。这并不意味着问题是重复的。所以如果你认为它是重复的，请投票并查看是否会被删除。我个人不同意，但这不由我决定。我不明白为什么要因为它还回答了另一个问题就对一个完全好的和相关的答案进行负评。 - HelloWorld

我改变了主意，删除了一个完美的答案，因为它有重复，并投票关闭。 - Asons