<!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中的 ...
随机推荐
-
Loadrunner中参数化实战（8）-Unique+Each occurrence
参数化数据30条: 脚本如下,演示登录,投资,退出操作是,打印手机号: 首先验证Vugen中迭代: Unique+Each occurrence 设置迭代4次Action 结果如下:
-
spring aop中的propagation的7种配置的意思
1.前言. 在声明式的事务处理中,要配置一个切面,即一组方法,如 <tx:advice id="txAdvice" transaction-manager="txM ...
-
Java Web系统经常使用的第三方接口
1. Web Service 接口 1.1 接口方式说明和长处 在笔者的开发生涯中,当作为接口提供商给第三方提供接口时,以及作为client去调用第三方提供的接口时,大部分时候都是使用 Web Se ...
-
html打开个人QQ聊天页面
打开qq聊天页面(有权限需要添加好友) <a href="tencent://message/?uin=1578929883&Site=&Menu=yes" ...
-
STM32的RFID射频读写控制装置
,大二上学期做的,过了很久,先上一下图: 这并不是做个最后一版:主体是RC552+STM32+1062:蜂鸣器,继电器,LED等:反正最后的效果就是,刷一下卡,1602显示一下持卡人(需要提前注册,注 ...
-
蓝桥杯 倍数问题(dfs，枚举组合数)
标题:倍数问题 [题目描述]众所周知,小葱同学擅长计算,尤其擅长计算一个数是否是另外一个数的倍数.但小葱只擅长两个数的情况,当有很多个数之后就会比较苦恼.现在小葱给了你 n 个数,希望你从这 n 个数 ...
-
sql查询表中重复数据个数
select train_code,count(1) from tb_ask_trainbodyroadtrain group by train_code having count(1) >1
-
josn的格式化
public String formatJson(Object obj) { com.alibaba.fastjson.JSONObject json=(com.alibaba.fastjson.JS ...
-
Netty 源码（一）Netty 组件简介
Netty 源码(一)Netty 组件简介 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.Netty 架构 Core: ...
-
[Alpha]Scrum Meeting#3
github 本次会议项目由PM召开,时间为4月3日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写团队贡献分配计划(issue#39) 调整&分配工作 SiM ...