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 ...
随机推荐
- 使用 typescript ，提升 vue 项目的开发体验（1）
此文已由作者张汉锐授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言:对于我们而言,typescript 更像一个工具 官方指南 从 vue2.5 之后,vue 对 ts ...
- 复制构造函数被调用的三种情况------新标准c++程序设计
1.当用一个对象去初始化同类的另一个对象时,会引发复制构造函数被调用.例如,下面的两条语句都会引发复制构造函数的调用,用以初始化c2. C c2 (c1); C c2=c1; 这两条语句是等价的.注意 ...
- Socket 简易静态服务器 WPF MVVM模式（二）
command类 标准来说,command会有三种模式,委托命令 准备命令 附加命令 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand ...
- hive默认分隔符
默认分隔符‘\001',对应ascii码SOH: 通过cat -A filename可以查看分隔符:
- 用C语言构建一个可执行程序的流程
1.流程图 从用C语言写源代码,然后经过编译器.连接器到最终可执行程序的流程图大致如下图所示. 2.编译流程 首先,我们先用C语言把源代码写好,然后交给C语言编译器.C语言编译器内部分为前端和后端. ...
- 630. Course Schedule III
There are n different online courses numbered from 1 to n. Each course has some duration(course leng ...
- js 封装常用方法
1. 获取数据类型 function getType(params) { , -) } 2. 深拷贝 function deepCopy(params) { var obj; if (typeof p ...
- 【bzoj4514】: [Sdoi2016]数字配对 图论-费用流
[bzoj4514]: [Sdoi2016]数字配对 好像正常的做法是建二分图? 我的是拆点然后 S->i cap=b[i] cost=0 i'->T cap=b[i] cost=0 然后 ...
- DRF中的版本控制
一.为什么要有版本 某些客户端 使用低版本只维护不开发新功能 v1 主要的产品还要不断的更新迭代功能 v2 API 版本控制允许我们在不同的客户端之间更改行为(同一个接口的不同版本会返回不同的数据). ...
- Array数组结构底层实现复习
Array数组结构底层实现复习 内容待总结: size capacity length