Center elements in an absolutely positioned div

Question

I have the following HTML:

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

Styled as follows:

#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

I want to center the 3 "a" tags in a div like this

However, I have the following limitations:

• the outer shell must be absolutely positioned
• I can only use LESS / CSS.
• I can not add or remove any HTML.
• The width of the container should remain dynamic ("tags can be added or removed via JS)

Is it possible?

Answer 1

Add this to your code and it will work:

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

(You can also choose a smaller width)

Demo: http://codepen.io/anon/pen/jWVbQy

: fooobar.com/questions/11977/...

---

width:

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

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

: fooobar.com/questions/11977/...