<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>css</title>

        <style type="text/css">

            * { margin:0; padding:0; list-style:none;  }

            #vertical_box {

                width:100%;

                display:table;

                border:1px red solid;

                height:400px;

                *position:relative; /*针对IE的hack*/

            }

            #vertical_box_sub {

                display: table-cell;

                vertical-align: middle;

                *position:absolute; /*针对IE的hack*/

                *top:50%;

            }

            #vertical_box_container {

                font-family:"宋体";

                border:1px green solid;

                *position:relative; /*针对IE的hack*/

                *top:-50%;

                margin:0 auto;

                width:200px;

            }

        </style>

    </head>

    <body>

        <div id="vertical_box">

            <div id="vertical_box_sub">

                <div id="vertical_box_container">

                    <p>我是居中的文字</p>

                    <p>我居中</p>

                    <p>你也居中</p>

                    <img src="" border=0 alt="\" title="">

                </div>

            </div>

        </div>

    </body>

</html>

未知高度定宽div水平居中及垂直居中（兼容ie6及其他牛逼浏览器）的更多相关文章

  1. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  2. 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  4. div水平居中和垂直居中

    水平居中和垂直居中 水平居中包含两种情况:        块级元素的水平居中:margin:0px auto;        文字内容的水平居中:text-align: center;        ...

  5. div中嵌套div水平居中，垂直居中

    方法一: div(父):display:table; div(子):display:table_cell;margin:0 auto;vertical-align:middle; 方法二: div(父 ...

  6. div水平居中且垂直居中

    <style> .vertical-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, ...

  7. css实现三栏布局，两边定宽，中间自适应

    1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...

  8. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  9. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

随机推荐

  1. 通过Anuglar Material串串学客户端开发 - NodeJS模块机制之Module.Exports

    module.exports 前文讲到在Angular Material的第二个编译文件docs/gulpfile.js中却看到了一个奇怪的东西module.exports那么module.expor ...

  2. [stm32] USART USART1收发功能工程

    >_<!功能:PC端发送一个特定的字符:0x0d 0x0a,单片机则返回一句话,如图: >_<!知识: 1.复用功能I/O和调试配置(AFIO)  为了优化外设数目,可以把一些 ...

  3. H5常用代码：适配方案1

    在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始.从此篇博客开始会连续记录下我经常用到的一些适配方案. 对于传统的PC项目,直接在移动端打开也都是会以视 ...

  4. Emmet语法预览

    Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器.Emmet 定义了一些缩写,当我们输入缩写代码后,按展开键(默认是 ...

  5. atitit groovy 总结java 提升效率

    atitit groovy 总结java 提升效率 #---环境配置 1 #------安装麻烦的 2 三.创建groovy项目 2 3.  添加 Groovy 类 2 4.  编译运行groovy类 ...

  6. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  7. Language

    TODO Java(jdk8),Scala,Spring,Spark,Python,Linux,C,Netty,HttpClient,Hadoop YARN,RaspberryPi Jetty,Tom ...

  8. 【转】升级Xcode6.3插件失效解决办法

     1.打开终端,输入以下代码获取到DVTPlugInCompatibilityUUID         defaults read /Applications/Xcode.app/Contents/I ...

  9. StarUml:Exception EOleSysError in module StarUML.ex

    http://sourceforge.net/p/staruml/discussion/510442/thread/9fe12cac/ run as administrator.Works fine.

  10. LDAP查询过滤语法（MS）

    http://social.technet.microsoft.com/wiki/contents/articles/5392.active-directory-ldap-syntax-filters ...