Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
39 lines (35 sloc) 1.72 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>title test</title>
<style type="text/css">
*{margin:0; padding:0;}
/*外层测试容器*/
.box{height:500px; width:100%; background:#ccc;}
/*针对ie6,7*/
.out{position:relative; width:100%; height:100%; overflow:hidden;}
.middle{position:absolute; top:50%; border:1px solid red;}
.in{position:relative; top:-50%; width:600px; margin:0 auto; border:1px solid blue;}
/*ie7中out和middle设置为static时垂直居中不生效,所以单独针对ie7为out和middle分别设置relative和absolute,ie6和其他所有浏览器继续使用static*/
/*针对ie8+ 和 高级浏览器*/
.out[class]{position:static; *position:relative; _position:static; display:table;}
.middle[class]{position:static; *position:absolute; _position:static; display:table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
<!--s 未知高度垂直居中-->
<div class="out">
<div class="middle">
<div class="in">
<p><a href="http://geek100.com" target="'_blank">前端集合</a></p>
<p>前几天微博上发了两条听来的段子。若有人挡,便打去。事歇。”</p>
<p>之所以说是“段子”,是因为我听还是有一定的可信度的。这两则段子里面内涵太过丰富了,为此也惹得一些朋友不太高兴。与其在微博里一个个评论,不如好好的将这两则段子好好分析一下,和它的现实背景联系起来。</p>
</div>
</div>
</div>
<!--e 未知高度垂直居中-->
</div>
</body>
</html>