How do I horizontally center an absolute positioned element inside a 100% width div?

Question

In the example below, #logo is positioned absolutely and I need it to be horizontally centered within #header. Normally, I would do a margin:0 auto for relatively positioned elements but I am stuck here. Can someone 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
}

Good question... what ever happened to align: center ;)... don't try that because it wont work ;) — craig1231, May 26 '13 at 09:59
Hey, do you realise that with CSS like that, you're positioning the logo in the window, not in the header? — Mr Lister, May 26 '13 at 10:11
@Desi margin auto works, you need to use it properly see my example — Rohit Agrawal, May 26 '13 at 10:21

Alessandro Minoccheri · Accepted Answer · 2014-05-31T10:25:42.490

297

If you want to align center on left attribute.
The same thing is for top alignment, you could use margin-top: (width/2 of your div), the concept is the same of left attribute.
It's important to set header element to position:relative.
try 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

edited May 31 '14 at 10:25

answered May 26 '13 at 10:00

Alessandro Minoccheri

35,521
22
122
171

3

left: 0; right:0; did the trick for me. thanks @Alessandro – Junaid Apr 11 '18 at 11:19
4

important note that's easy to forget, width must be set for this way to work – Joshua Ohana Dec 19 '18 at 18:13
1

Can this be explained as well? Why does left/right:0 + margin-left/right:0 + having a defined width make this work? – Siamaster Feb 11 '19 at 11:06

Arjun · Answer 2 · 2014-07-30T07:35:45.147

136

You will have to assign both left and right property 0 value for margin: auto to center the logo.

So in this case:

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

You might also want to set position: relative for #header.

This works because, setting left and right to zero will horizontally stretch the absolutely positioned element. Now magic happens when margin is set to auto. margin takes up all the extra space(equally on each side) leaving the content to its specified width. This results in content becoming center aligned.

edited Jul 30 '14 at 07:35

answered May 26 '13 at 10:09

Arjun

1,922
1
13
21

7

I like this much better than offsetting with a margin because it works with dynamic widths. – davidmdem Aug 28 '13 at 15:39
Can you explain, why this works?? – hugo der hungrige Nov 01 '13 at 18:01
7

Setting `left` and `right` to zero will horizontally stretch the absolutely positioned element. Now magic happens when `margin` is set to `auto`. `margin` takes up all the extra space(equally on each side) leaving the content to it's specified `width`. This results in content becoming center aligned. – Arjun Nov 05 '13 at 10:44
@davidmdem It won't always work with dynamic widths (unless you add a child div). Consider for example a div containing text only... – matpop Apr 11 '16 at 11:53

pzin · Answer 3 · 2014-07-30T14:11:00.197

21

Was missing the use of calc in the answers, which is a cleaner solution.

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

Works in most modern browsers: http://caniuse.com/calc

Maybe it's too soon to use it without a fallback, but I thought maybe for future visitors it would be helpful.

edited Jul 30 '14 at 14:11

answered May 26 '13 at 11:04

pzin

4,200
2
28
49

I think the formula in Clac function, seems to act the same as margin-left:-50px; – Ata Iravani May 05 '14 at 16:17
2

The diff is wrong: you have to subtract the HALF of the element's width... In this case left: calc(50% - 25px); – Maurizio Battaghini Jul 30 '14 at 12:45
You're right. Thanks! It's updated now. – pzin Jul 30 '14 at 14:11

score 7 · Answer 4 · answered May 26 '13 at 10:16

7

In my experience, the best way is right:0;, left:0; and margin:0 auto. This way if the div is wide then you aren't hindered by the left: 50%; that will offset your div which results in adding negative margins etc.

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

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

answered May 26 '13 at 10:16

Kevin Lynch

24,427
3
36
37

Yep, I said the same sometime back here http://stackoverflow.com/a/16758185/1571437 :D – Arjun May 26 '13 at 10:18
thanks, i like more this method because allows you to have dynamically sizes on the item, regards! – Alexis Apr 21 '15 at 03:36

score 4 · Answer 5 · answered May 26 '13 at 10:18

here is the best practiced method to center a div as position absolute

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;
}

user3849374 · Answer 6 · 2014-07-17T13:37:08.040

2

Its easy, just wrap it in a relative box like so:

<div class="relative">
 <div class="absolute">LOGO</div>
</div>

The relative box has a margin: 0 Auto; and, important, a width...

edited Jul 17 '14 at 13:37

answered Jul 17 '14 at 13:31

user3849374

127
1
3

Wow, this is great! Can't believe there are so many ways to achieve centering an absolute positioned div, but this one is definitely better then setting negative margin and works with any width as well! – YemSalat Sep 19 '14 at 07:01

How do I horizontally center an absolute positioned element inside a 100% width div?

6 Answers6

Linked