CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Piklis
Piklis

Reputation: 67

IE7 position absolute with margin auto bug

i have problem with positioning and margin in IE7. I have got div with absolute position and auto margin.

position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;

This div should be centered to its relative position parent. But in IE7 this is not working. Here is example of working code http://jsfiddle.net/3zwkA/

Upvotes: 1

Views: 2152

Answers (3)

Martin
Martin

Reputation: 46

My personal go to "hack" for this is to use left and top to place the element and then move it correct using negative margins

position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;  //move it left by half the width

Upvotes: 2

soyuka
soyuka

Reputation: 9105

If you'd like to center absolutely the div in it's parent you should do :

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left:-25px;
    margin-top:-25px;
    border: 1px yellow solid;
}

see updated jsfiddle

Upvotes: 3

Mattias Buelens
Mattias Buelens

Reputation: 20179

Vertical centering in CSS is a PITA, especially when you also want IE7 (or even IE6) support. There are many ways to do it, but each come with some kind of drawback. Your method corresponds to method 4 in the linked article, and is known to malfunction in IE < 8.

For elements with fixed width and height though, a more robust method (method 2 in the article) consists of positioning it at top: 50%; left: 50% and subtracting half of the width from the top and left margins. This works in all browsers. Here, have a fiddle.

Upvotes: 2

Related Questions