<!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. Nginx学习笔记（四） 源码分析&socket/UDP/shmem

    源码分析 在茫茫的源码中,看到了几个好像挺熟悉的名字(socket/UDP/shmem).那就来看看这个文件吧!从简单的开始~~~ src/os/unix/Ngx_socket.h&Ngx_s ...

  2. [ACM_模拟] UVA 10881 Piotr's Ants[蚂蚁移动 数组映射 排序技巧]

    "One thing is for certain: there is no stopping them;the ants will soon be here. And I, for one ...

  3. thrift之TTransport层的堵塞的套接字I/O传输类TSocket

    本节将介绍第一个实现具体传输功能的类TSocket,这个类是基于TCP socket实现TTransport的接口.下面具体介绍这个类的相关函数功能实现. 1.构造函数 分析一个类的功能首先看它的定义 ...

  4. [ZT]Language codes – MFC

    Below is table with all MFC language codes. I think it can be sometimes very useful.  First column c ...

  5. iOS相册、相机、通讯录权限获取

    iOS相册.相机.通讯录权限获取 说明 这是本人写的一个工具,用以便利的处理各种权限获取的操作,目前提供相册.照相机.通讯录的权限获取操作,参考了 http://www.jianshu.com/p/a ...

  6. AngularJS 中的 Promise 和 设计模式(转)

    原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...

  7. GTD时间管理(2)---管理收集箱

    通过上面一篇文章,相信大家对GTD收集有了原理大致的了解,如果大家对收集不是很了解,可以去看一下. 当我们收集到很多想法和事情之后,在晚会的时候必须要清空收集箱,否则收集箱会堆积如山,最终收集箱成了垃 ...

  8. 构造函数模式自己定义js对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JSP 处理汉字信息

    request 对象获取客户端提交的汉字字符时,会出现乱码问题,所以对含有汉字字符的信息必须进行特殊处理.将获取的字符串用 ISO-8859-1 进行编码,并将编码存放到一个字节数组中,再将这个数组转 ...

  10. [Aaronyang] 写给自己的WPF4.5 笔记23 [3d交互与动画 4/4]

    效果图预览: 1. 3d中的命中测试 我新建了一个空的窗口,用zam做了一个长方体,深度很小.然后导出xaml <Viewport3D x:Name="ZAM3DViewport3D& ...