div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。
div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css垂直居中。
这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。
第一种方法：具体实例代码如下

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 DIVCSS5</title>  
<style>  
#main {  
    position: absolute;  
    width:400px;  
    height:200px;  
    left:50%;  
    top:50%;  
    margin-left:-200px;  
    margin-top:-100px;  
    border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
    <div id="main">DIV水平居中和上下垂直居中<a href="http://www.liweiliang.com/">DIVCSS</a></div>  
</body>  
</html>

这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位left和top，并且同时设置margin-top和margin-left,为了观察到效果，所以对此div盒子加了个红色边框。

水平垂直居中原理介绍
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。

第二种，直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div盒子上下垂直居中</title>
<style type="text/css">
#Divbox { 
    position:static;
    *position:relative; 
    height:300px;
    width:500px;
    border:1px solid #03c;
    *display:block!important;
    display:table!important;
}
.Divbox_a {
    position:static;
    *position:absolute;
    display:table-cell;
    vertical-align:middle;
    *display:block;
    top:50%;
    width:100%;
    text-align:center;
}
.Divbox_a a{ text-decoration: none;}
</style>
</head>
<body>
<div id="Divbox">
    <div class="Divbox_a">
        <a href="http://www.liweiliang.com/">
            <p>CSS Web Design 阿冰的博客 - liweiliang.com</p>
            <p>Div 上线居中盒子模型演示。</p>
            <p>Div 上线居中盒子模型演示。</p>
        </a>
    </div>
</div>
</body>
</html>
版权声明：本文为李维亮博主的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：http://www.liweiliang.com/154.html

标签: divcss, div垂直居中, div盒子上下垂直居中

评论已关闭