<!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. SQL Server转发记录指针的坏味道

    什么是转发记录指针? 转发记录指针是堆表中特有的数据存储机制. 当你修改了某个数据页中的一行时,如果该行所在的数据页已经无法存放其修改后的行, SQL Server会把这行数据移动到一个新的数据页上面 ...

  2. git tag查看、创建与删除

    tag管理 查看tag 太多的话用 grep 过滤 $ git tag | grep dev_20150525 # 创建tag $ git tag -a dev_20150525_16 -m 'xxx ...

  3. [ACM_几何] Metal Cutting(POJ1514)半平面割与全排暴力切割方案

    Description In order to build a ship to travel to Eindhoven, The Netherlands, various sheet metal pa ...

  4. DigitalOcean上使用Tornado+MongoDB+Nginx+Supervisor+DnsPod快速搭建个人博客

    DigitalOcean 之前买了个便宜的VPS并且在上面搭建了我自己写的博客程序,后来VPS里运行MongoDB经常自己挂掉就索性没理了.直到现在VPS已经过期,服务器被强制关掉了.周末在家索性想着 ...

  5. redis 内存

    ziplist:http://blog.csdn.net/benbendy1984/article/details/7796956 redis 内部存储结构:http://www.searchtb.c ...

  6. 从MySQL 5.5到5.7看复制的演进

    概要:MySQL 5.5 支持单线程模式复制,MySQL 5.6 支持库级别的并行复制,MySQL 5.7 支持事务级别并行复制.结合这个主线我们可以来分析一下MySQL以及社区发展的一个前因后果. ...

  7. javaweb学习总结(二十一)——JavaWeb的两种开发模式

    SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...

  8. SAFS Distilled --- 9 April 2015 to 16 April 2015

    In the org.safs.model, the class Component stores: information of this component's name reference of ...

  9. 大家一起写mvc（三）_结束

    上一篇介绍到要写mvc的所用的核心技术,这一篇我们就开始真正的开始写mvc,其实就是把昨天写过的代码进行一些组装就可以了. 我们用eclipse新建一个web项目.然后web.xml如下 <?x ...

  10. log4qt的使用

    Log4Qt替换成新版本使其支持Qt5:https://github.com/devbean/log4qt/tree/master/src/log4qt 1. 解压log4qt到目标文件夹,如D:\Q ...