简单的通过CSS控制垂直居中 at 2008.7.21 16:04
本篇文章原文地址：http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。
译文内容：
当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。
旧的方法
经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信这也是很多设计师喜欢做的事情。首先，我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离，然后我们需要设置一个负的 margin 来将元素拉回到中间的位置。
现在让我们来看一下这种方法的代码以及它所带来的问题：
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;
}
vert-hoz{
position:absolute;
top:50%;
left:50%;
margin-top:-198px;/* half elements height*/
margin-left:-313px;/* half elements width*/
width:624px;
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="vert-hoz">
<h1>Content goes here</h1>
</div>
你可以在这里看到这段代码的展示。
我为它设置了一个背景图片，仅仅是为了让它看起来更舒服一些，而我们真正需要注意的部分是中间那部分灰色的区域。