绝对定位 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" 标签居中

但是我有以下限制：

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

这可能吗？

Answer 1

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

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

（您也可以选择更小的宽度）

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

发件人：

没有固定的其他选项width:

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

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

发件人：

绝对定位 div 内的居中元素

Center elements within absolutely positioned div

css

frontend

less