DIV水平垂直居中的CSS兼容写法
2024-08-27 08:56:58
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>
最新文章
- 源映射(Source Map)详解
- NOIP2001 一元三次方程求解[导数+牛顿迭代法]
- Jenkins使用FTP进行一键部署及回滚(Windows)
- iOS沙盒机制的基本操作总结
- Mysql 字符串截取
- c# 财务数据编号的生辰
- 《Play for Java》学习笔记(七)数据类型解析——Body parser
- 堆排序(C++版)
- 使用maven编译dubbo,导入eclipse(其他maven开源项目编译类似)
- Enhanced RCP: How views can communicate – The e4 way | Tomsondev Blog
- .NET开发者必备的11款免费工具
- Ubuntu下编译程序是出现pthread_create未定义错误
- [js笔记整理]正则篇
- JAVA高级篇(二、JVM内存模型、内存管理之第二篇)
- 创建jsp+Servlet+JavaBean+JDBC+MySQL项目的过程
- 绘制3D的js库
- 七类网线 支持10gb/s的速度的计算方法
- 鸟哥的私房菜:Bash shell(一)-Bash shell功能简介
- GIS-ArcGIS JS API FeatureLayer图层绑定事件的几种方式
- 3Sum Smaller -- LeetCode