使div垂直水平居中于浏览器 - 建站教程

2013-08-02 4452 阅读 建站教程

我们在设计页面布局的时候,很有可能需要用到一个 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隐藏或屏蔽IE滚动条的几种常用方法 - 建站教程下一篇网站流量到底是怎么来的? - 网站运营