How do I center an absolute positioned element horizontally within a div with a 100% width? [duplicate]

Problem

#logo is positioned absolutely in the example below, and I need it to be horizontally aligned within #header. For reasonably positioned elements, I normally use margin:0 auto, but I’m stuck here. Is it possible for someone to show me the way?

JS Fiddle: http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

Asked by J82

Solution #1

If you wish to center the characteristic on the left. Similarly, you might use margin-top: (width/2 of your div) for top alignment; the notion is the same as the left attribute. It’s critical to use position:relative for the header element. Consider this:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

If you would like to not use calculations you can do this:

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

DEMO2

Answered by Alessandro Minoccheri

Solution #2

To centre the logo, give both the left and right properties a 0 value for margin: auto.

As an example, in this case:

#logo {
  background:red;
  height:50px;
  position:absolute;
  width:50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

For #header, you might also wish to use position: relative.

Setting the left and right to 0 will extend the perfectly positioned element horizontally. When the margin is set to auto, something magical happens. The margin takes up all of the excess space (equally on both sides), leaving the content at the width provided. As a result, the material is center aligned.

Answered by Arjun

Solution #3

The usage of calc in the answers was lacking, which is a better solution.

#logo {
  position: absolute;
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background: red;
}

http://caniuse.com/calc/html/html/html/html/html/html/html/html/html/html/html/html/html/html/html

Perhaps it’s too soon to utilize it without a fallback, but I thought it might be useful for future guests.

Answered by pzin

Solution #4

The best solution, in my opinion, is to use right:0;, left:0;, and margin:0 auto. This manner, if the div is broad, you won’t be hampered by the left: 50%; that will offset your div, resulting in negative margins and other issues.

DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}

Answered by Kevin Lynch

Solution #5

The best way for centering a div as a position absolute is as follows.

DEMO FIDDLE

code —

#header {
background:black;
height:90px;
width:100%;
position:relative; // you forgot this, this is very important
}

#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin: auto; // margin auto works just you need to put top left bottom right as 0
top:0;
bottom:0;
left:0;
right:0;
}

Answered by Rohit Agrawal

Post is based on https://stackoverflow.com/questions/16758102/how-do-i-horizontally-center-an-absolute-positioned-element-inside-a-100-width