margin:auto doesn't seem to work, can't figure it out

Question

I'm trying to horizontally center the red "countdown" div, but it's not going my way. Have been stuck for hours but haven't yet found a single solution.

http://jsfiddle.net/737tM/

HTML:

<div id="container">

  <div id="countdownWrapper">
    <div id="countdown">

    </div>
  </div>

</div>

CSS:

body {
margin:0;
background:black;
overflow: hidden;}

#container {
height:100%;
width:100%;
z-index:-900;
position:fixed;
min-width:500px;}

#countdownWrapper {
width:100%;
height:100px;
bottom:0;
position:absolute;
display:block;}

#countdown {
margin-left:auto;
margin-right:auto;
display:block;
width:400px;
height:100px;
background-color: rgba(0, 0, 0, 0.5);
position:absolute;
z-index:1000;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background:red;}

Margins don't really play nicely with absolutely-positioned elements. Is there a reason you positioned it that way? I don't see any right, left, top, or bottom rules. — Tieson T., Jun 06 '14 at 23:49
Yes, it was a reason until I put the #countdown inside the #countdownWrapper. Just forgot to remove position:absolute from the #countdown after assigning that value to the parent instead. Problem solved anyway, thanks for the fast feedback! — user3716760, Jun 06 '14 at 23:57
@user3716760 just a note, margins can be calculated in absolute positioned elements, but when you do it, the margins will be relative to the div left and top properties of the absolute positioned element. please check my answer. — João Pinho, Jun 07 '14 at 00:38

score 2 · Accepted Answer · answered Jun 06 '14 at 23:49

2

remove your "position:absolute;" from countdown. Margins cannot be calculated on absolutely positioned elements.

answered Jun 06 '14 at 23:49

chris

1,172
12
15

1

-1, part of your answer fixes the problem, and then other part is just incorrect! margins can be calculated in absolute position elements, check my answer. – João Pinho Jun 07 '14 at 00:37

score 2 · Answer 2 · answered Jun 07 '14 at 00:35

It's fixed here!

The problem was in the position absolute, margins can be calculated in absolute positioned elements, but when you do it, the margins are relative to the their position which is defined by left and top properties. Because you wanted it to be relative to the wrapper you needed to remove the absolute positioning from the countdown div. And that's it.

#countdown {
    margin: 0 auto;
    display:block;
    ...
}

score 2 · Answer 3 · answered Jun 07 '14 at 02:10

The problem with you div is the

position:absolute;

property you have applied on the element named countdown.

Your center margining will work correctly if you just remove this property.

Also, contrary to the answer marked as the correct answer, margins DO apply on absolutely positioned elements. However, margins work differently on absolutely positioned elements as compared to statically positioned elements.

You need to learn how positioning works. Chris Coyier's article is certainly a good start -> http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/.

Hope this helps!!!

score 1 · Answer 4 · edited Aug 14 '14 at 11:49

If you change the code to:

#countdown {
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:400px;
    height:100px;
    background-color: rgba(0, 0, 0, 0.5);
    position:absolute;
    z-index:1000;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background:red;
    top: 0; left: 0; bottom: 0; right: 0;
}

it will work. The reason is that in the normal content flow margin: auto equals '0' for the top and bottom, in your case margin-left and margin-right are 'auto' so their value equals '0'. Position:absolute breaks the block out of the typical content flow rendering the rest of the content as if that block wasn't there. Setting top:0; left:0; bottom:0; right:0; gives the browser a new bounding box for the block.

Giving the block a width and height prevents the block from taking up all the available space and forces the browser to calculate margin:auto based on the new bounding box. Therefore: the margin of the absolute positioned element is then positioned inside these offsets. Since the block is absolutely positioned and therefore out of the normal flow the browser gives equal values to margin-left and margin-right centering the element in the bounds set earlier.

Hope this helps

margin:auto doesn't seem to work, can't figure it out

4 Answers4