div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。
div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css垂直居中。
这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。
1、具体实例代码如下
- <!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>
- <body>
- <div id="main">DIV水平居中和上下垂直居中</div>
- </body>
- </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盒子上下垂直居中的更多相关文章
- css在盒子中垂直居中和固定居中
顶部固定居中 <div class="w960 fixed"> 我是固定的 </div> .w960{ width: 960px; margin:0 aut ...
- CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局
<title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...
- CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + disp ...
- div盒子水平垂直居中的方法
这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...
- 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...
- html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- DIV+CSS如何让文字垂直居中?（转）
此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...
- DIV+CSS如何让文字垂直居中？
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- springmvc 定时器
CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 秒 是 0-59 , - * ...
- 简单实现Tab切换（带框架）
<script type="text/javascript"> $(function () { //加载时添加的标签卡 if ('<%=Request[" ...
- (转载)解决ListView中使用EditText所遇到的一些冲突
大家都知道在listView中使用editText,在输入过程中是有冲突的.今天稍微研究了一下这个问题,有一点点小小的心得和大家一起分享下. 首先建立一个最简单的demo,主界面就是一个ListVie ...
- [Effective JavaScript 笔记]第40条：避免继承标准类
ECMAScript标准库里配备了许多重要的类,如Array,function,以及Date等.扩展这些类生成子类可以方便完成很多工作,但它们的定义具有很多特殊的行为,所以很难写出行为正确的类. Ar ...
- Smarty s01
复习面向过程中,如何输出显示变量的内容 01.php 第一个版本,使用三个文件来输出html 1.访问文件 2.类MyTpl.class.php 3.一个html模板文件 课堂练习第一个版本 第二个版 ...
- JSON: property "xxx" has no getter method in class "..."
Exception in thread "main" net.sf.json.JSONException: java.lang.NoSuchMethodException: Pro ...
- swfit 中的类型属性说明
swift 中不叫做类属性,叫类型属性,因为在swift中,struct 和enum也是可以有这种属性的,叫类属性明显不准. 有以下注意事项: 对于值类型(指结构体和枚举)可以定义存储型和计算型类型属 ...
- native app
Apache Cordova是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎.你可以把他想象成类似于Webkit和Google ...
- Myeclipse 安装svn插件
安装subclipse, SVN插件1.从官网下载site-1.8.22.zip文件 访问不了可点我网盘2.从中解压出features与 plugins文件夹,复制到MyEclipse\MyEcl ...
- sdut 2162:The Android University ACM Team Selection Contest（第二届山东省省赛原题，模拟题）
The Android University ACM Team Selection Contest Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里 ...