码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-25 06:29:10      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

1、具体实例代码如下

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

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

2、实例截图

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

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

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

标签:

原文地址:http://www.cnblogs.com/si-shaohua/p/4246953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!