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

2023年8月28日 211次阅读

我有以下 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.
>容器的宽度必须保持动态(可以通过JS添加或删除“a”标签)

这可能吗？

最佳答案 将其添加到您的代码中它将起作用：

#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

没有固定宽度的其他选项：

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

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

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

点赞