這篇有詳細介紹，我用了方法方法三

http://blog.yam.com/hanasan/article/35806444

 

在需要被垂直置中的div前放置另一個div，設置為height:50%，margin-bottom:-contentHeight(目標高度的負值)

Sample Code

HTML

<body>
    <div id="floater"></div>
    <div id="middle">
        要被置中的div
    </div>
</body>

CSS

html, body {
    margin:0; padding:0; height:100%;
}
#floater { float:left; height:50%; margin-bottom:-200px;
    width:1px; /* only for IE7 */
}
#middle {  clear:both; height:400px; position:relative; }

優點:

  1. 所有browser都支援(Note:IE7必須在#floater追加width:1px才work!)
  2. 當內容增加時，垂直置中的div不會被切掉，而是會自動出現scroll-bar

缺點:

  1. 沒甚麼缺點，真要說就是一樣高度得固定。另外若置中物件的父層是body, 即使視窗被USER拖曳拉小了，div也一樣會唯持置中(笑)
arrow
arrow
    全站熱搜

    mosquitoyo 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄