Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
<meta name="description" content="未知高度div如何垂直居中: 真正兼容ie6，7，8，firefox，chrome" />
    <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%; }
        .in{position:relative; top:-50%; width:600px; margin:0 auto; }
        
        /*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>之所以说是“段子”，是因为我听来的东西就没有5W，因此我也不太能确定事情的可信度有多少。但从大家的评论来看，这两则段子还是有一定的可信度的。这两则段子里面内涵太过丰富了，为此也惹得一些朋友不太高兴。与其在微博里一个个评论，不如好好的将这两则段子好好分析一下，和它的现实背景联系起来。</p>
            </div>
        </div>
    </div>
<!--e 未知高度垂直居中-->
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
aisinvonpro
0viewers