您的位置:首页 > CSS技巧 >

 

div垂直居中 css div盒子上下垂直居中显示

 

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。

div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中。

这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。

1、具体实例代码如下

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

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

2、实例截图

div+css实现div对象同时上下垂直居中和水平居中截图
div+css实现div对象同时上下垂直居中和水平居中截图

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

相关CSS教程推荐:
1)、CSS图片居中
2)、html文字居中
3)、css字体居中
4)、div水平居中
5)、css字体垂直居中
6)、div css布局居中代码
7)、ie9文字字体垂直居中

4、在线演示查看案例

5、完整案例html+css打包下载:

 

标签(Tag): 居中 垂直
本文分享URL地址:http://www.css5.com.cn/jiqiao/645.html

更多

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2013-11-22     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/jiqiao/645.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!