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 ...
随机推荐
- C#三层架构搭建
一.简介 主要分为:界面层(User Interface layer),业务逻辑层(Business Logic Layer),数据访问层(Data access layer) 1.作用 界面层(UI ...
- 查看Eclipse版本号的方法及各个版本区别 Eclipse选择标准
这篇文章主要介绍了查看Eclipse版本号的方法及各个版本区别 Eclipse选择标准,方便初学者选择适合自己的版本,需要的朋友可以参考下 Eclipse 是一个开放源代码的.基于Java的可扩展开发 ...
- bzoj 3864: Hero meet devil（dp套dp）
题面 给你一个只由\(AGCT\)组成的字符串\(S (|S| ≤ 15)\),对于每个\(0 ≤ .. ≤ |S|\),问 有多少个只由\(AGCT\)组成的长度为\(m(1 ≤ m ≤ 1000) ...
- JavaScript学习笔记——2.数据类型与类型转换
数据类型 JS中一共分成六种数据类型 1- String 字符串 2- Number 数值 3- Boolean 布尔值 4- Null 空值 5- Undefined 未定义 6- Object 对 ...
- 第9项：尽量使用try-with-resources而不是try-finally(Prefer try-with-resources to try-finally)
Java库包含许多必须通过调用close方法手动关闭的资源. 示例包括InputStream,OutputStream和java.sql.Connection. 关闭资源经常被客户忽视,可预见的可 ...
- 洛谷 P1546 最短网络 Agri-Net（最小生成树）
嗯... 题目链接:https://www.luogu.org/problemnew/show/P1546 首先不难看出这道题的思想是用了最小生成树,但是这道题有难点: 1.读题读不明白 2.不会读入 ...
- A printf format reference page (cheat sheet)
Summary: This page is a printf formatting cheat sheet. I originally created this cheat sheet for my ...
- php 页面压缩---
网站优化中,页面压缩是很有效的一种方法,可以明显提升页面访问速度. 页面压缩也有很多的方法,有PHP自带的zlib的gzip压缩,还有清除html页面中不必要的字符,空格,注释,换行符等. 第一种打开 ...
- SiteServer CMS简介
SiteServer CMS 是中国在.NET平台下.强大的企业站开源CMS内容管理系统和网站群系统. 能够最低的成本.最少的人力投入在最短的时间内架设好一个功能齐全.性能优异.规模庞大并易于维护的网 ...
- 地牢逃脱----DFS搜索最优解
https://www.nowcoder.com/practice/0385945b7d834a99bc0010e67f892e38?tpId=85&tqId=29831&tPage= ...