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-top和margin-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盒子上下垂直居中的更多相关文章

  1. css在盒子中垂直居中和固定居中

    顶部固定居中 <div class="w960 fixed"> 我是固定的 </div> .w960{ width: 960px; margin:0 aut ...

  2. CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

    <title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...

  3. CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

     CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + disp ...

  4. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  5. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  6. html中div使用CSS实现水平/垂直居中的多种方式

    CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...

  7. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  8. DIV+CSS如何让文字垂直居中?（转）

    此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...

  9. DIV+CSS如何让文字垂直居中？

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. iOS: FFMpeg编译和使用问题总结

    iOS: FFmpeg编译和使用问题总结 折磨了我近一周多时间的FFmpeg库编译问题终于解决了,必须得把这一段时间来遇到过的坑全写出来.如果急着解决问题,编译最新版本的FFmpeg库请直接看第二部分 ...

  2. 第16章 使用Squid部署代理缓存服务

    章节概述: 本章节从代理缓存服务的工作原理开始讲起,让读者能够清晰理解正向代理(普通模式.透明模式)与反向代理的作用. 正确的使用Squid服务程序部署代理缓存服务可以有效提升访问静态资源的效率,降低 ...

  3. nginx（五）nginx与php的安装配置

    经过前面学习,对nginx有个大概的了解,来配置LNMP;只要是在系统安装过程中选择安装比较齐全的包,基本上系统都能满足安装要求,下面是我一个一个测试的,基本上全部安装所需的库文件,放心安装: [ro ...

  4. Maven使用常见问题整理

    Maven使用常见问题整理  1.更新eclipse的classpath加入新依赖  1.在dependencyManagement里面加入包括版本在内的依赖信息,如:   <dependenc ...

  5. 技术分享：WIFI钓鱼的入门姿势

    简介 该实验先是搭建一个测试环境,然后创建一个假的无线接入点,把网络连接连接到假的接入点并且强迫用户连接假的无线点. 事先准备 1.无线网卡:无线网卡用于数据包的嗅探和注入. 2. Backtrack ...

  6. linux shell 字符串操作详解 （长度，读取，替换，截取，连接，对比，删除，位置 ）

    在做shell批处理程序时候,经常会涉及到字符串相关操作.有很多命令语句,如:awk,sed都可以做字符串各种操作. 其实shell内置一系列操作符号,可以达到类似效果,大家知道,使用内部操作符会省略 ...

  7. sharepoint bcs (bussiness connectivity services)

    sharepoint bcs  在2010 版本中是提供2010 与外部数据连接的. BCS全名Business Connectivity Services,可以把它看成SharePoint 2007 ...

  8. Android 中的异步下载

    网上提到最多的就是利用AsyncTask进行异步下载,用android-async-http第三方库的也比较多.这里写点注意事项. 先说说android-async-http,这个库发送请求利用thr ...

  9. mysqldump备份

    备份工具1.mysqldump(数据量很大时不推荐使用)   myisam 锁表   innodb 行锁 mysqldump --help | less   #查看mysql所有的语法 mysqldu ...

  10. 【USACO】packrec

    这道题卡了很久,开始没读清楚题,没看到题目中给的6个组合是仅可能的组合,一直自己想有多少种组合方式.后来才发现,于是就想到写遍历.我想的是,这六种情况下,每个位置摆哪个矩形是不确定的,于是可以对方块的 ...