Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?

Some details:

  • I am looking for solution for the entire page.

  • You need to specify only width of the element to be centered. Height of the element is not known in design time.

  • When minimizing window, scrolling should appear only when all white space is gone. In other words, width of screen should be represented as:

"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement width=widthOfCenteredElement"+
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"

And the same for the height:

"topSpace height=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement height=heightOfCenteredElement"+
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"

  • By practical I mean that use of tables is OK. I intend to use this layout mostly for special pages like login. So CSS purity is not so important here, while following standards is desirable for future compatibility.
share|improve this question

From http://www.webmonkey.com/codelibrary/Center_a_DIV

#horizon        
    {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    display: block
    }

#content    
    {
    width: 250px;
    height: 70px;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    visibility: visible
    }

<div id="horizon">
   <div id="content">
      <p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
   </div><!-- closes content-->
</div><!-- closes horizon-->
share|improve this answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Centering</title>
 <style type="text/css" media="screen">
  body, html {height: 100%; padding: 0px; margin: 0px;}
  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
  #middle {vertical-align: middle}
  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
 </style> 
</head>
<body>
 <table id="outer" cellpadding="0" cellspacing="0">
  <tr><td id="middle">
   <div id="centered" style="border: 1px solid green;">
    Centered content
   </div>
  </td></tr>
 </table>
</body>
</html>

Solution from community.contractwebdevelopment.com also is a good one. And if you know height of your content that needs to be centered seems to be better.

share|improve this answer

For horizontal:

<style>
body
{
    text-align:left;
}
.MainBlockElement
{
    text-align:center;
    margin: 0 auto;
}
</style>

You need the text-align:left in the body to fix a bug with IE's rendering.

share|improve this answer

For this issue you can use this style

#yourElement {
   margin:0 auto;
   min-width:500px;
}
share|improve this answer

Is this what you are trying to accomplish? If not, please explain what is different than the image below?

alt text

share|improve this answer
    
It is not exactly what I am looking for usually. Centered content should be fixed size (in pixels), not just 50% of the screen. And I fix it by specifying just width of content. And looking to solution to not specify fixed height. So this layout can be used for stuff with different but same width. – Alexander Yanovets Sep 16 '08 at 13:30
    
This will result in when you resize window, your content will be always the same size, but centered. – Alexander Yanovets Sep 16 '08 at 13:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.