<!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. [OpenGL] 2、企业版VC6.0自带的Win32-OpenGL工程浅析

    一. 建立工程 O(∩_∩)O~上一节介绍了一种非常容易的OpenGL的搭建方法,这一节将就上一节介绍的VC6.0企业版自带的OpenGL Win32 Application建立一个模板工程,并分析这 ...

  2. MySQL SELECT执行顺序

    SELECT语句的完整语法为: () SELECT () DISTINCT <select_list> () FROM <left_table> () <join_typ ...

  3. autocomplete实现联想输入，自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  4. 这样leetcode简单题都更完了

    这样leetcode简单题都更完了,作为水题王的我开始要更新leetcode中等题和难题了,有些挖了很久的坑也将在在这个阶段一一揭晓,接下来的算法性更强,我就要开始分专题更新题目,而不是再以我的A题顺 ...

  5. hdu 1548 楼梯 bfs或最短路 dijkstra

    http://acm.hdu.edu.cn/showproblem.php?pid=1548 Online Judge Online Exercise Online Teaching Online C ...

  6. 改善C#公共程序类库质量的10种方法

    最近重构一套代码,运用以下几种方法,供参考. 1  公共方法尽可能的使用缓存 public static List<string> GetRegisteredCompany() { Str ...

  7. android: 调用摄像头拍照

    很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...

  8. LoadRunner在移动端性能测试的应用

    摘选自 <精通移动app测试实战:技术.工具和案例>新书上市 如果大家之前做过性能测试,我相信一定会应用过大名鼎鼎的性能测试工具-LoadRunner.目前LoadRunner的最新版本为 ...

  9. Gabor学习笔记

    本文根据博客http://blog.csdn.net/watkinsong/article/details/7870996 ,博客http://www.cnblogs.com/yingying0907 ...

  10. 在Flex （Flash）中嵌入HTML 代码或页面—Flex IFrame

    在flex组件中嵌入html代码,可以利用flex iframe.这个在很多时候会用到的,有时候flex必须得这样做,如果你不这样做还真不行-- flex而且可以和html进行JavaScript交互 ...