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

<p>Some details:</p>

<ul>
<li><p>I am looking for solution for the entire page.</p></li>
<li><p>You need to specify only width of the element to be centered. Height of the element is not known in design time.</p></li>
<li><p>When minimizing window, scrolling should appear only when all white space is gone.
In other words, width of screen should be represented as:  </p></li>
</ul>

<p>"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+<br>
"centeredElement width=widthOfCenteredElement"+<br>
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"  </p>

<p>And the same for the height:</p>

<p>"topSpace height=(screenHeight-heightOfCenteredElement)/2"+<br>
"centeredElement height=heightOfCenteredElement"+<br>
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"</p>

<ul>
<li>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.</li>
</ul>

[{'answer_id': 49353, 'author': 'Oleksandr Yanovets', 'author_id': 5139, 'author_profile': 'https://Stackoverflow.com/users/5139', 'pm_score': 2, 'selected': False, 'text': '<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\n"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;\n&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;\n&lt;head&gt;\n &lt;title&gt;Centering&lt;/title&gt;\n &lt;style type="text/css" media="screen"&gt;\n  body, html {height: 100%; padding: 0px; margin: 0px;}\n  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}\n  #middle {vertical-align: middle}\n  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}\n &lt;/style&gt; \n&lt;/head&gt;\n&lt;body&gt;\n &lt;table id="outer" cellpadding="0" cellspacing="0"&gt;\n  &lt;tr&gt;&lt;td id="middle"&gt;\n   &lt;div id="centered" style="border: 1px solid green;"&gt;\n    Centered content\n   &lt;/div&gt;\n  &lt;/td&gt;&lt;/tr&gt;\n &lt;/table&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>Solution from <a href="http://community.contractwebdevelopment.com/css-vertically-horizontally-center" rel="nofollow noreferrer">community.contractwebdevelopment.com</a> also is a good one. And if you know height of your content that needs to be centered seems to be better.</p>\n'}, {'answer_id': 49759, 'author': 'Joel Coehoorn', 'author_id': 3043, 'author_profile': 'https://Stackoverflow.com/users/3043', 'pm_score': 1, 'selected': False, 'text': "<p>For horizontal:</p>\n\n<pre><code>&lt;style&gt;\nbody\n{\n    text-align:left;\n}\n.MainBlockElement\n{\n    text-align:center;\n    margin: 0 auto;\n}\n&lt;/style&gt;\n</code></pre>\n\n<p>You need the text-align:left in the body to fix a bug with IE's rendering.</p>\n"}, {'answer_id': 57219, 'author': 'jessegavin', 'author_id': 5651, 'author_profile': 'https://Stackoverflow.com/users/5651', 'pm_score': 0, 'selected': False, 'text': '<p>Is this what you are trying to accomplish?   If not, please explain what is different than the image below?</p>\n\n<p><img src="https://content.screencast.com/users/jessegavin/folders/Jing/media/a7adbb3d-dfc9-4f57-9cca-c47e9d399dd0/2008-09-11_1259.png" alt="alt text"></p>\n'}, {'answer_id': 288881, 'author': 'keikkeik', 'author_id': 15193, 'author_profile': 'https://Stackoverflow.com/users/15193', 'pm_score': 2, 'selected': False, 'text': '<p>From <a href="http://www.webmonkey.com/codelibrary/Center_a_DIV" rel="nofollow noreferrer">http://www.webmonkey.com/codelibrary/Center_a_DIV</a></p>\n\n<pre><code>#horizon        \n    {\n    text-align: center;\n    position: absolute;\n    top: 50%;\n    left: 0px;\n    width: 100%;\n    height: 1px;\n    overflow: visible;\n    display: block\n    }\n\n#content    \n    {\n    width: 250px;\n    height: 70px;\n    margin-left: -125px;\n    position: absolute;\n    top: -35px;\n    left: 50%;\n    visibility: visible\n    }\n\n&lt;div id="horizon"&gt;\n   &lt;div id="content"&gt;\n      &lt;p&gt;This text is&lt;br&gt;&lt;emphasis&gt;DEAD CENTRE&lt;/emphasis &gt;&lt;br&gt;and stays there!&lt;/p&gt;\n   &lt;/div&gt;&lt;!-- closes content--&gt;\n&lt;/div&gt;&lt;!-- closes horizon--&gt;\n</code></pre>\n'}, {'answer_id': 13010260, 'author': 'Saeed', 'author_id': 1726377, 'author_profile': 'https://Stackoverflow.com/users/1726377', 'pm_score': 1, 'selected': False, 'text': '<p>For this issue you can use this style</p>\n\n<pre><code>#yourElement {\n   margin:0 auto;\n   min-width:500px;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/49350', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5139/']