用div+css實現水平垂直居中

之前咱們作網頁佈局時要實現頁面水平垂直居中的方法須要用 js代碼來實現。這樣故然是一種好的方法，可是對於js 代碼不懂的不熟的朋友來講也是比較困難的。今天咱們就來說一下如何用 div+css實現水平垂直局中的呢。請你們先來看一下效果圖：

這裏我只是截了個圖示範一下。

用div+css實現水平垂直居中的css樣式代碼部分：

        <style type="text/css">

            /*居中層CSS*/

            #center

            {

                height:0px;

                width:0px;

 

                /*設置位置*/

                top:50%;

                left:50%;

                position:absolute;

            }

 

            /*內容層CSS*/

            #content

            {

                background:#FF9933;

                width:300px;

                height:200px;

 

                /*設置浮動，脫離居中層限制（菜單什麼頗有用哦）*/

                position:absolute;

 

                /*這裏設置的2個值，第一個是寬，第二個是高，但都是這個DIV的寬高的一半*/

                margin:-150px 0 0 -100px;

 

                /*演示用*/

                color:#fff;

            }

        </style>

          

具體的效果還請你們本身 下載源代碼去運行查看一下效果，就會明白的。但願能對給您好帶來幫助。

 

提醒一下你們無論是用div+css來實現頁面水平垂直居中仍是經過js 來實現頁面水平垂直居中的效果，都存在一個缺陷，那就是在小屏幕的狀況下，沒有滾動條也看完整。