Centering a div vertically and horizontally

Question

i created a maze and i want to center the smily div ("highlight_lose") to the maze ("main")

#highlight_lose {
    width: 550px;
    height:550px;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    bottom: 375px;


}

here is the fiddle link: http://jsfiddle.net/uqcLn/30/

CP510 · Accepted Answer · 2013-10-07T21:45:46.273

New Answer

Based on what you gave me, this is the required CSS code, using the old faithful position absolute method.

#highlight_lose {
    height: 300px;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -150px;
}
div.sad_smileyface {
    width: 300px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    ...
    [your graphic styling code here]
}

One point to note, is I set the containing div's width to 100% and centered it vertical. I then centered the child smileyface div horizontally. This isn't required, just the method I did it in. If the height changes, adjust the #highlight_lose, if the width changes, update sad_smileyface

Original Answer

If the height is at least decalred (which yours is), set the parent container as position: relative (just to make sure), you should be able to use margin: auto; on your child div's. This should work cross-browser to IE 6.

Other options include doing your method, by setting the margin to negative half the height and width. margin: -275px -275px;.

Also, CSS3's Flexbox model will fix this as well, but is heavily prefixed and not supported everywhere.

here is what heppened after i tried this: http://jsfiddle.net/uqcLn/32/ — alonblack, Oct 07 '13 at 20:55
It worked for me, is there a way you could simplify your jsfiddle. With all those divs and effects it's hard to find the necessary divs. — CP510, Oct 07 '13 at 21:03

score -1 · Answer 2 · answered Oct 07 '13 at 21:18

-1

http://jsfiddle.net/uqcLn/34/

Here is the new updated version, you can also set margin instead of transform for older browsers

answered Oct 07 '13 at 21:18

user2816715

46
3

Please attach the code within the answer – Yotam Omer Oct 07 '13 at 21:39
Didn't work for me at all. The smileyface is still in the corner. – CP510 Oct 07 '13 at 21:49

Centering a div vertically and horizontally

2 Answers2