中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

步驟二：

現(xiàn)在我們開始用一些基本的 CSS 來給頁面添加樣式。把以下代碼放入在我們的 html 頁面頂部被引入的 style.css。

html, body {
 margin:0; padding:0;
 height:100%;
}

body {
 background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
 font-family:Georgia, Times, serifs;
}

#floater {
 position:relative; float:left;
 height:50%; margin-bottom:-200px;
 width:1px;
}

#centered {
 position:relative; clear:left;
 height:400px; width:80%; max-width:800px; min-width:400px;
 margin:0 auto;
 background:#fff;
 border:4px solid #666;
}

#bottom {
 position:absolute;
 bottom:0; right:0;
}

#nav {
 position:absolute; left:0; top:0; bottom:0; right:70%;
 padding:20px; margin:10px;
}

#content {
 position:absolute; left:30%; right:0; top:0; bottom:0;
 overflow:auto; height:340px;
 padding:20px; margin:10px;
}

在我們能夠把 content 垂直居中之前， body 和 html 應該被拉伸到 100％ 的高度。由于 height在 padding 和 margin 之內，所以我們要把它們設成 0 以防止因為很小的 margin 出現(xiàn)滾動條。

floater 的 margin-bottom 是 content 高度(400px)的一半，-200px。

現(xiàn)在可以看到一下效果：

#centred 的寬度為 80％。這可以市網頁隨著顯示器的大小而變化。一般稱作流體布局。設置 min-width 和max-width 以避免網頁過大或者過小。 但是 IE 不支持 min/max-width。顯然可以用固定寬度來代替。

因為 #centred 是相對定位的，在它里面我們可以用絕對定位來定位元素。設置 #content 的 overflow:auto;以避免滾動條的出現(xiàn)。IE 不怎么喜歡 overflow:auto; 除非我們指定高度(不是 top 和 bottom 的定位，也不是 ％)因此我們給它指定高度。

出處：前端觀察
責任編輯：bluehearts

上一頁 CSS實現(xiàn)垂直居中的5種方法 [3] 下一頁 CSS實現(xiàn)垂直居中的5種方法 [5]

◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。