網(wǎng)頁布局CSS簡單實現(xiàn)垂直居中

經(jīng)常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信這也是很多設(shè)計師喜歡做的事情。首先，我們采用絕對定位的方法讓元素離開頂部和左部 50% 的距離，然后我們需要設(shè)置一個負的 margin 來將元素拉回到中間的位置。

現(xiàn)在讓我們來看一下這種方法的代碼以及它所帶來的問題：

CSS 代碼：

html,body{ height:100%; margin:0; padding:0; } body{ background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center; text-align:center; min-width:626px; min-height:400px; } #vert-hoz{ position:absolute; top:50%; left:50%; margin-top:-198px;/* half elements height*/ margin-left:-313px;/* half elements width*/ width:624px; height:394px; border:1px solid silver; background:#666; overflow:auto;/* allow content to scroll inside element */ text-align:left; } h1 {color:#fff;margin:0;padding:0}

HTML 代碼：

<div id="vert-hoz"> <h1>Content goes here</h1> </div>

你可以在 這里 看到這段代碼的展示。

我為它設(shè)置了一個背景圖片，僅僅是為了讓它看起來更舒服一些，而我們真正需要注意的部分是中間那部分灰色的區(qū)域。

如你看到的那樣，現(xiàn)在的結(jié)果正如我們想象的那樣，那部分元素在水平和垂直的方向上完美的處在了中間的位置。這是按照我們最初提起的那種方式實現(xiàn)的，首先讓元素在水平和垂直方向上離開 50% 的距離，然后設(shè)置負的 margin 讓它回到中間的位置。

盡管表面上看來，現(xiàn)在的方法已經(jīng)有效的達到了我們預期的目標，但是，同時也產(chǎn)生了嚴重的負面影響。當一個人將瀏覽器窗口變小，或者使用一個低分辨率的電腦時，那么居中的那部分元素的上部和左部將消失，即使通過滾輪的滑動，也無法看到。

文字的頂部和左部已經(jīng)消失，而且，隨著我們?yōu)g覽器窗口的不斷縮小，這段文字將最終離開我們的視線。為了彌補這些負的數(shù)值，我們?yōu)?body 設(shè)置了 min-width 和 min-height，但是你可以看到，這根本沒有起到任何效果，那段文字依然停留在我們視線以外的地方

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章標題：網(wǎng)頁布局CSS簡單實現(xiàn)垂直居中
分享鏈接：http://www.muchs.cn/news13/309813.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站導航、搜索引擎優(yōu)化、網(wǎng)站設(shè)計、品牌網(wǎng)站設(shè)計、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)