未知高度定宽div水平居中及垂直居中（兼容ie6及其他牛逼浏览器）
<!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及其他牛逼浏览器）的更多相关文章
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 图文-水平垂直居中兼容ie6+
图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...
- div水平居中和垂直居中
水平居中和垂直居中 水平居中包含两种情况: 块级元素的水平居中:margin:0px auto; 文字内容的水平居中:text-align: center; ...
- div中嵌套div水平居中，垂直居中
方法一: div(父):display:table; div(子):display:table_cell;margin:0 auto;vertical-align:middle; 方法二: div(父 ...
- div水平居中且垂直居中
<style> .vertical-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, ...
- css实现三栏布局，两边定宽，中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...
随机推荐
- Nhibernate基础使用教程以及简易封装
1.Nhibernate简介 NHibernate是一个面向.NET环境的对象/关系数据库映射工具.对象/关系数据库映射(object/relational mapping,ORM)这个术语表示一种技 ...
- C#与数据库访问技术总结（十六）之 DataSet对象
DataSet对象 DataSet对象可以用来存储从数据库查询到的数据结果,由于它在获得数据或更新数据后立即与数据库断开,所以程序员能用此高效地访问和操作数据库. 并且,由于DataSet对象具有离线 ...
- javascript中重要概念-闭包-深入理解
在上次的分享中javascript--函数参数与闭包--详解,对闭包的解释不够深入.本人经过一段时间的学习,对闭包的概念又有了新的理解.于是便把学习的过程整理成文章,一是为了加深自己闭包的理解,二是给 ...
- windows下安装PhpDocumentor(phpdoc)笔记
PhpDocumentor简介 PHPDocumentor是一个用PHP写的工具,对于有规范注释的php程序,它能够快速生成具有相互参照,索引等功能的API文档.老的版本是phpdoc,从1.3.0开 ...
- paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决
paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决 windows ok linux犯错误．．． 查看loging, 初始化的时候儿jdbcurl,user,pwd都是 ...
- C#：通过Visual Studio项目预生成命令获取SVN版本号
之前有一个winfrom项目,想要通过获取SVN版本号作为程序的内部编译版本号.网上也有各种方法,但没有一篇行得通的方法.于是我经过一系列研究,得出了一些经验,特总结成一篇博客. 方法一:通过SVN命 ...
- JavaScript Tips
Tips: return false - event.preventDefault(); //阻止默认行为 P.S 阻止a标签的跳转 - event.stopPropagation(); //阻止事件 ...
- 如何处理Android SDK无法更新问题？
在Android开发中,最痛苦的事情就是相关库升级后,Android SDK太低,跑步起来,最最痛苦的事情就是,想更新,却因大天朝的一墙之隔,愣是没法更新.遇到这种情况怎么办呢?小编和大家分享一个解决 ...
- javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- Android 5.0/5.1开发问题专贴
注:非5.0特定的开发问题,可以在这个帖子里查:Android开发问题汇总. 1.官方提供的例子android-support-v7-appcompat编译时提示android:actionModeS ...