寬度高度不固定的div如何水平置中與垂直置中

標籤：style   http   color   os   width   問題   

寬度高度不固定的div如何水平置中與垂直置中

很多新手在寫css的時候經常遇到的一個問題，當div沒有固定的寬度或者高度的時候，如何才能讓div水平或者垂直置中顯示。
如果div有固定寬度的話，用padding，margin都很容易實現。方法有很多種。不過經常遇到這種div沒有固定的寬度高度的情況，我們就不能用margin,padding設定固定的距離了。這個問題讓很多人頭疼。而怎麼樣才能讓這個div置中顯示呢？其實這種情況解決的辦法也是有很多種，js，css都可以實現。

這裡主要介紹一下採用css的方法，有什麼問題還請各位看官指出。我在這裡寫了一個demo示範頁面，查看比較詳細的解說和示範的話，請移步寬度高度不固定的div，如何水平置中以及垂直置中示範頁面

寬度不固定的div如何設定水平置中：

<style type="text/css">
.container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
.center{display:inline-block;border:2px solid #fff;}
.center{_display:inline;} /*針對ie6 hack*/
.center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}
</style>
<div class="container">
<div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
<div style="clear:both"></div></div>

無固定寬度的div水平置中代碼要點：

這種div寬度不固定的情況，常見於分頁處，由於分頁不確定有多少頁，所以用於分頁的元素所在的容器寬度通常不是固定的。
父容器container加css屬性 text-align:center;子容器center加css屬性display:inline-block;
.center{_display:inline;} 為針對ie6的hack，針對ie6前面的display:inline-block;的作用是在ie下觸發元素的layout，使其haslayout。（關於haslayout，此處有涉及）

高度不固定的div如何設定垂直置中

<div id="vc"><div id="vci"><div id="content">
我們垂直置中了，我們水平置中了
</div></div></div>
<style type="text/css">
#vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; _position:relative; }
#vci { vertical-align:middle; display:table-cell;  _position:absolute; _top:50%; }
#content { color:#fff; border:1px solid #fff;  _position:relative; _top:-50%;  }
</style>

無固定高度的div垂直置中代碼要點：

父容器vc的css屬性 display:table;overflow:hidden;
子容器vci的css屬性 vertical-align:middle;display:table-cell;
針對ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
更詳細的介紹，下面傳送門

 

轉自：牛魔王的世界觀 » 寬度高度不固定的div如何水平置中與垂直置中