使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;


(QQ/微信:314111741):西安王尘宇 » 使div垂直水平居中于浏览器

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

微信扫一扫打赏