改进的方法

针对这些问题的另一个类似的版本是让元素依然保持垂直方向上的定位方式，但是水平方向上设置 margin 为 auto 以达到我们的目的。这样子消除了文字在水平方向上的问题。请看改进的代码。

CSS 代码：

html,body{
    height:100%;
    margin:0;
    padding:0;
}
body{
    background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
    text-align:center;
    min-width:626px;
    min-height:400px;
}
#vertical{
    position:absolute;
    top:50%;
    margin-top:-198px;/* half main elements height*/
    left:0;
    width:100%;
}
#hoz {
    width:624px;
    margin-left:auto;
    margin-right:auto;
    height:394px;
    border:1px solid silver;
    background:#666;
    overflow:auto;/* allow content to scroll inside element */
    text-align:left;
}
h1 {color:#fff;margin:0;padding:0}

HTML 代码：

<div id="vertical">
    <div id="hoz">
        <h1>Content goes here</h1>
    </div>
</div>

你可以在 这里 看到实际的页面效果。

这样子达到了我们预期的一部分效果，但是在垂直方向上依然存在着问题，你可以在下图中看到：

出处：蓝色理想
责任编辑：bluehearts

上一页 简单的通过CSS控制垂直居中 [1] 下一页 简单的通过CSS控制垂直居中 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。