用div+css實現(xiàn)水平垂直居中
來源:程序員人生 發(fā)布時間:2013-10-21 20:39:28 閱讀次數(shù):2962次
網(wǎng)(LieHuo.Net)教程 以前我們做網(wǎng)頁布局時要實現(xiàn)頁面水平垂直居中的方法需要用js代碼來實現(xiàn)。這樣故然是一種好的方法,但是對于js 代碼不懂的不熟的朋友來說也是比較困難的。今天我們就來講一下如何用div+css實現(xiàn)水平垂直局中的呢。請大家先來看一下效果圖:
這里我只是截了個圖示范一下。
用div+css實現(xiàn)水平垂直居中的css樣式代碼部分:

<style type="text/css">
/*居中層CSS*/
#center
{
height:0px;
width:0px;
/*設(shè)置位置*/
top:50%;
left:50%;
position:absolute;
}
/*內(nèi)容層CSS*/
#content
{
background:#FF9933;
width:300px;
height:200px;
/*設(shè)置浮動,脫離居中層限制(菜單什么很有用哦)*/
position:absolute;
/*這里設(shè)置的2個值,第一個是寬,第二個是高,但都是這個DIV的寬高的一半*/
margin:-150px 0 0 -100px;
/*演示用*/
color:#fff;
}
</style>
提醒一下大家不管是用div+css來實現(xiàn)頁面水平垂直居中還是通過js 來實現(xiàn)頁面水平垂直居中的效果,都存在一個缺陷,那就是在小屏幕的情況下,沒有滾動條也看完整。
生活不易,碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈