<!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. JavaScript实用技巧总结

    前言 总结一下最近接触到的JavaScript语法糖,与大家共享. 每块糖都有详细的说明和示例,就不多说了. 准确的类型检查 /* * @function: * 类型检查示例 * 通过此方法,可以检查 ...

  2. 深入浅出OOP(四): 多态和继承(抽象类)

    在本文中,我们讨论OOP中的热点之一:抽象类.抽象类在各个编程语言中概念是一致的,但是C#稍微有些不一样.本文中我们会通过代码来实现抽象类,并一一进行解析. Abstract Classes 在微软的 ...

  3. Django时间查询

    1.gt:大于某个时间now = datetime.datetime.now()#前一天start = now – datetime.timedelta(hours=23, minutes=59, s ...

  4. Redis教程(六):Sorted-Sets数据类型

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/133.html 一.概述: Sorted-Sets和Sets类型极为相似, ...

  5. C语言实现二叉树-01版

    故事是这样开始的,项目经理有一天终于还是拍拍我肩膀说: 无论你的链表写得多么的好,无论是多么的灵活,我也得费老半天才查找到想要的数据: 这让我的工作非常苦恼,听说有一种叫做二叉树的数据结构,你看能不能 ...

  6. atitit.web的动态include 跟变量传递 java .net php

    atitit.web的动态include 跟变量传递 java .net php 1. 动态include  <jsp:include 1 2. 使用QueryString 1 3. 使用Ses ...

  7. Atitit.软件的建模种类and 建模语言选型and UML???

    Atitit.软件的建模种类and  建模语言选型and UML??? 1. 4大的建模种类:ui建模,业务流程建模 , 业务对象建模, 数据库建模 1 2. 文本还是图片化(推荐)的建模 1 3.  ...

  8. TF Boys (TensorFlow Boys ) 养成记(二)

    TensorFlow 的 How-Tos,讲解了这么几点: 1. 变量:创建,初始化,保存,加载,共享: 2. TensorFlow 的可视化学习,(r0.12版本后,加入了Embedding Vis ...

  9. 大家一起写mvc(一)

    关于java的mvc框架层出不穷,可能大家都会用,但是具体的原理知道不知道呢.所以我想写一个写一个简单mvc的系列博客,主要面向想了解这些原理的. 其实所谓的mvc框架,基本都是一个原理,就是配置一个 ...

  10. arcgis server账号需要设置地图缓存的访问权限

    如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限.  本文用菊子曰发布