使div垂直水平居中于浏览器

我们在设计页面布局的时候，很有可能需要用到一个 div 垂直水平居中于浏览器窗口，比如我们在开发内部管理系统的登录页面，或网站的 404 页面等。费话不多说，以下就是纯 CSS 实现 div 垂直水平居中于浏览器窗口的方法。

HTML Code：

<div id="container">
    内容。图片文字flash等。
    请注意：div 高度宽度以及 margin 负值需针对内容进行相应设置。
</div>

CSS Code：

<style type="text/css">
#container {
    border: 1px solid #999999;
    height: 60px;
    left: 50%;
    margin: -30px 0 0 -300px;
    position: absolute;
    top: 50%;
    width: 600px;
}
</style>

说明：

绝对定位 div
position:absolute;

顶部和左边距
top:50%; left:50%;

使用 margin 负值，负值大小为层自身高度宽度的各自二分之一
margin:-30px 0 0 -300px;

标签： css div 浏览器