DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中，非IE浏览器可以用CSS3来处理，IE浏览器中分别处理IE6和/IE7、IE8、IE9。
在IE低版本中，虽然大致上没有问题，但还是有一些细微的显示问题。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>DIV水平垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-size: 12px;
font-family: tahoma;
margin: 10px;
padding:0;
} .box {
border: 1px solid #f09;
background-color: #fcf;
width: 520px;
height: 360px;
position: relative;
overflow: hidden;
} .sub-box {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
} .con {
*position: relative; /* 星号兼容 IE6/IE6 */
*top: -50%;
*left: -50%;
margin: -50% 50% -50% -50% \0; /*兼容IE8（IE9也受影响，在下面处理掉IE9）*/
border: solid 1px #f00;
}
:root .con {
margin: auto; /*兼容处理IE9*/
}
</style>
</head>
<body>
<div id="ver"></div>
<div class="box">
<div class="sub-box">
<div class="con">
DIV垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中<br />
水平居中、垂直居中
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//显示浏览器版本
document.getElementById('ver').innerHTML = navigator.userAgent;
</script>
DIV水平垂直居中的CSS兼容写法的更多相关文章
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- scss : div水平垂直居中
scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- css实现div水平垂直居中
中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
随机推荐
- DataType--时间类型
SQL SERVER 存储时间的方式和存放浮点数的方式类似,存放时按照一定公式算出一个数值,存放到页面,在读取时按照公式求算出时间值,再按照默认或指定的时间格式展示给用户. 如果存放DATETIME数 ...
- 微信 oauth2 两次回调
场景: logger.Info("f: " + wx.From); logger.Info("c: " + wx.Code); logger.Info(&quo ...
- percona 5.7二进制安装
1.建立用户和组 sudo groupadd mysql sudo useradd -g mysql -s /sbin/nologin mysql 2.下载二进制包Percona-Server-5.7 ...
- 用HTML，css完成的百叶窗效果，新手必看
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> ...
- HDU6342-2018ACM暑假多校联合训练4-1011-Problem K. Expression in Memories
Problem K. Expression in Memories Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262 ...
- 品味Zookeeper之选举及数据一致性_3
品味Zookeeper之选举及数据一致性 本文思维导图 前言 为了高可用和数据安全起见,zk集群一般都是由几个节点构成(由n/2+1,投票机制决定,肯定是奇数个节点).多节点证明它们之间肯定会有数据的 ...
- 《Andrew Ng深度学习》笔记3
浅层神经网络 初步了解了神经网络是如何构成的,输入+隐藏层+输出层.一般从输入层计算为层0,在真正计算神经网络的层数时不算输入层.隐藏层实际就是一些算法封装成的黑盒子.在对神经网络训练的时候,就是对神 ...
- Android SharedPreferences应用实例(记录App的使用次数)
1.介绍 2.使用方法 3.java后台 package com.lucky.test46sharedpreferences_apply; import android.content.SharedP ...
- Android 日历视图(Calendarview)
1.介绍 2.常用属性 3.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...
- redis 连接字符串，设置密码
<add name="Abp.Redis.Cache" connectionString="127.0.0.1:6379,password=123456" ...