CSS實現垂直置中

標籤：osi   class   一半   也有   top   ott   idt   nbsp   使用   

問題描述：對一個div經常會碰到想要它垂直置中，一般情況下大家又是怎麼實現的呢？小糕收集了6種方法( ?? ω ?? )y

方法一
對於文本的垂直置中方法

line-height:parent-wrapper-height;text-align:center

這個應該也比較常見吧，對於像p標籤，如果只有一行文本，可以用它的行高等於容器的高度，但是如果是超過一行這個方法就不可靠了。

方法二
已經知道模組寬和高的情況下：

position:absolute;left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;

其實這個方法就是利用絕對位置，設50%就以一半為開始的位置，再利用margin負邊調整讓模組到了中間。

 

方法三
在不知道寬高的情況下，同樣也是絕對位置：

position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;

margin的auto值本來不支援垂直置中的，但是在絕對位置這樣設定可以的，而且其他的定位值可以修改，可以稍稍改變位置。

方法四
在不知道寬高的情況下，使用display中的table-cell：

display:table-cell;verticle-align:center;text-align:center;

如果中間是div橫向用margin:0 auto;就可以解決，字則用text-align:center。

 

方法五
CSS3中新加的display:-webkit-box，同樣可以用於不知道寬高的情況

display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;

-webkit-box-align可以控制垂直置中，-webkit-box-pack控制橫向置中。

方法六
CSS3用transform屬性：

top:50%;            left:50%;            transform:translate(-50%,-50%);             -webkit-transform:translate(-50%,-50%);             -moz-transform:translate(-50%,-50%);             -ms-transform:translate(-50%,-50%);

也有點類似於前面幾種方法的感覺，只是transform不用知道它的寬高，它自己能計算。

CSS實現垂直置中