Center elements within 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 within the div like this

However I have the following constraints:

the outer wrapper must be absolutely positioned
I can only use LESS/CSS.
I can't add or remove any HTML.
The width of the container must remain dynamic ("a" tags could be added or removed via JS)

Is this possible?

Possible duplicate of How to center absolute element in div? — Ason

CoderPi CoderPi · Accepted Answer · 2015-12-28T19:24:34

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

From: https://stackoverflow.com/a/8273750/4339170

Other option without a fixed width:

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

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

From: https://stackoverflow.com/a/23384995/4339170

Center elements within absolutely positioned div

1 Answers