我们在设计页面布局的时候,很有可能需要用到一个 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;