CODEWITHSUNDEEP
csscenteringmargins
Daniel Hedenström
Daniel Hedenström

Reputation: 973

Vertical centering in percent

I am trying to center a block of dynamic height. I followed the nice guide at Vanseo Design and implemented the solution with negative margins. After a while of tweaking I got it to work in Chrome, but when trying in IE and Firefox the negative margins were way off! Chrome and Safari handles the position as expected, but not IE and FF. Had it been only IE I could have done a classic IE-CSS-hack, but with Firefox in the mix as well... Anyone who know how to get vertical cenetring with dynamic element to work in all browsers?

Screenshot from Chrome / Safari (Correct):

Screenshot from Firefox / IE (Wrong):

<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>

<style type="text/css" media="screen"><!--
body 
    {
    color: white;
    background-color: #000;
    margin: 0px
}

#content
{    
    position: absolute;
    top: 50%;
    left: 0%;
    height: 64%;
    width: 100%;
    margin-top: -32%;
    text-align:center;
    background-color:#339;
}

--></style>
</head>

<body>
    <div id="content">
        <div class="bodytext">This box should be centered vertically</div>
    </div>
</body>
</html>

Upvotes: 1

Views: 132

Answers (1)

Manuel Choucino
Manuel Choucino

Reputation: 667

Well, you put a height of 64% for your element, so let do mats :) 100-68 = 36 ,., so there is only 36% left.

then devide this by 2 and you have 18

By putting your content ID to 18% from top and removing your margin, everything should work just fine. :)

#content
{    
    position: absolute;
    top: 18%;
    left: 0%;
    height: 64%;
    width: 100%;
    text-align:center;
    background-color:#339;
}

Upvotes: 1

Related Questions