網站建設之層水平居中和垂直居中代碼
發(fā)布日期:[2010/1/13] 編輯:奇億廣州網站建設
網站建設經常遇到層的水平居中和垂直居中設置,特別是DIV+CSS網站布局中更是家常便飯,F提供如何使層垂直居中和水平居中以及絕對于瀏覽器居中的代碼。
層垂直居中,設置層的line-height等于height高度即可實現,如下
#div {
height:30px;
line-height:30px;
}
層水平居中CSS代碼:
#div {
margin:0 auto;
}
如需要使層垂直水平于瀏覽器居中,則可使用外補丁margin負值的方法,即負值為層自身寬度、高度除以2,如一個寬度400高度300的層需要絕對于瀏覽器居中,則使用絕對定位然后設置距離瀏覽器上與左都為50%,margin-top的值為-150,而margin-left的值為-200。
以下為層在瀏覽器絕對居中的CSS代碼:
#div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
}
調用:
<div id="div">垂直居中或水平居中的層</div>