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兼容写法的更多相关文章

  1. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  2. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  3. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  4. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  5. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  6. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  7. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  8. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  9. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

随机推荐

  1. windowsPhone一些不常见控件

    1.InkPresenter:可以产生手写效果的控件. http://www.cnblogs.com/randylee/archive/2010/08/10/1791222.html 2.Thumb: ...

  2. IIS部署SSL，.crt .key 的证书，怎么部署到IIS

    SSL连接作用不说,百度很多.因为最近想考虑重构一些功能,在登录这块有打算弄成HTTPS的,然后百度了,弄成了,就记录一下,以便以后万一部署的时候忘记掉. 做实验的时候,拿的我个人申请的已经备案的域名 ...

  3. react.js学习之路五

    最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...

  4. php代码审计9审计反序列化漏洞

    序列化与反序列化:序列化:把对象转换为字节序列的过程称为对象的序列化反序列化:把字节序列恢复为对象的过程称为对象的反序列化 漏洞成因:反序列化对象中存在魔术方法,而且魔术方法中的代码可以被控制,漏洞根 ...

  5. 关于spring xml文件中的xmlns,xsi:schemaLocation

    链接:https://blog.csdn.net/u010571844/article/details/50767151 使用spring也有一段时间了,配置文件也见了不少了,但是发现配置文件的bea ...

  6. pycharm 2016 注册(pycharm-professional-2016.3.2)

    BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  7. LOSKI,我

    2019年入驻github以及博客园 在发现用github的issue写博客稍微有些奇怪后决定开辟这个更适合写博的空间 2019/4/1 目前大一,计算机专业,尚未分流 更多的时间花在了数据结构与算法 ...

  8. 【hadoop】 eclipse中的“run on hadoop”和打包成jar提交任务的区别

    eclipse中的 调试运行 及 “run on hadoop”默认只是运行在单机上的,因为要想在集群中让程序分布式运行还要经历上传类文件.分发到各个节点等过程, 一个简单的“run on hadoo ...

  9. wpa_supplicant

    一 函数接口介绍 wpa_ctrl_open接口用来打开wpa_supplicant的控制接口,在UNIX系统里使用UNIX domain sockets,而在Windows里则是使用UDP sock ...

  10. C语言学习总结（1）——结构体

      一,什么是结构体    我们知道数组(Array),它是一组具有相同类型的数据的集合.但在实际的编程过程中,我们往往还需要一组类型不同的数据,例如对于学生信息登记表,姓名为字符串,学号为整数,年龄 ...