<!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. 架构模式对象与关系结构模式之：标识域（Identity Field）

    一:标识域(Identity Field) 标识域(Identity Field)可以理解为主键.使用领域模型和行数据入口的时候,就要使用标识域,因为这两个对象代表的是唯一存在的那个数据记录.事务脚本 ...

  2. CentOS7 修改系统时间

    yum -y install ntp [root@localhost kevin]# systemctl enable ntpdsystemctl start ntpdntpdate us.pool. ...

  3. 【Linux高级驱动】LCD logo

    1.将LOGO图片的大小调整到合适尺寸(480x272) 2. 使用GIMP2生成符合Linux要求的PPM图片文件 启动GIMP2打开通过ACDSEE调整的图片-->    通过菜单 图像模式 ...

  4. paip.提升效率--僵尸代码的迷思

    paip.提升效率--僵尸代码的迷思 僵尸代码是指你的代码库里被注释掉的那部分代码, 很少去使用它,就像僵尸一样, 看雷kill-the-zombies-in-your-code ========== ...

  5. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  6. Java String字符串/==和equals区别,str。toCharAt(),getBytes,indexOf过滤存在字符，trim()/String与StringBuffer多线程安全/StringBuilder单线程—— 14.0

    课程概要 String 字符串 String字符串常用方法 StringBuffer StringBuilder String字符串: 1.实例化String对象 直接赋值  String str=& ...

  7. oracle--创建表空间、用户名、密码

    原文链接:http://blog.sina.com.cn/s/blog_4ce992f40101cspr.html

  8. Unity中的协程是什么？

    什么是协程? 1.协程是一个分部执行,遇到条件(yield return 语句)会挂起,直到条件满足才会被唤醒继续执行后面的代码. 2.Unity在每一帧(Frame)都会去处理对象上的协程.Unit ...

  9. C# winform的WebBrowser非常规编程（强烈推荐）

    本文章被今日头条推荐 1.在WebBrowser中实现抓取301和302协议 在WebBrowser中抓取301和302协议目前官方提供的组件远远不够,需要借助HttpMonitor.dll.这个组件 ...

  10. QT on Android开发

    1.安装QT 2.安装JDK 配置如下系统环境变量: JAVA_HOME D:\Java\jdk Path %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin CLASSPATH ...