html - 在 FF、IE6 和 IE7 中工作的 HTML 中垂直和水平居中的实用解决方案

Question

在 Firefox、IE6 和 IE7 中工作的 HTML 内容垂直和水平居中的实用解决方案是什么？

一些细节:

• 我正在寻找整个页面的解决方案。

• 您只需指定要居中的元素的宽度。元素的高度在设计时未知。

• 最小化窗口时，只有当所有空白都消失时，滚动才会出现。 换句话说，屏幕宽度应表示为:

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

同样的高度:

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

• 我所说的实用是指可以使用表格。我打算将此布局主要用于登录等特殊页面。因此 CSS 纯度在这里并不那么重要，而遵循标准对于 future 的兼容性是可取的。

Answer 1

来自 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-->