DIV CSS 佈局教程網

你對DIV水平居中和垂直居中的解決方法是否了解，這裡和大家分享一下，相信本文介紹一定會讓你有所收獲。

DIV水平居中和垂直居中的多種解決方案

在定義網頁的CSS樣式的時候，我們或許並不怎麼用到垂直居中。在div-CSS.Net中，大量的文章介紹了這些知識。在和別人合作的時候，你的代碼的自適應性就需要做到最大程度的好。你自己在做自己的網頁的時候或許可以保證在視覺上是居中的，但是如果讓這個元素或者他的父元素變大了，你還能保證居中嗎？

vertical-align是個不錯的屬性，但是這個屬性起初是針對表格的cell的。當然這個屬性雖然對塊級元素不起作用，但是對行內元素比如span還是有作用的（這時候，這個屬性設置為負值元素內容就下移，正值則上移）。

下面是比較專業的垂直居中的集中解決方案。記錄於此，以便查閱。

1、單行垂直居中

文字在層中垂直居中vertical-align屬性是做不到的.我們這裡有個比較巧妙的方法就是:設置height的高度與line-height的高度相同!

ExampleSourceCode[]

<divstyledivstyle="line-height:500px;height:500;"> 
 

2、層水平居中

設置div的寬度小於父div的寬度，設置margin:0auto;，即可讓div居中。

ExampleSourceCode[]

#parentdiv  
{  
width:500px;  
}  
#childdiv{  
width:200px;  
margin:0auto;  
}  
 

3、層中的文字水平居中

在childdiv的CSS加上text-align:center;

ExampleSourceCode[]

#parentdiv  
{  
width:500px;  
}  
#childdiv{  
width:200px;  
margin:0auto;  
text-align:center;  
}