實現div垂直居中的CSS代碼


我學到的第一個CSS知識就是如何把一個固定寬度和高度的元素水平或者垂直居中。這些居中的內容可能是入站歡迎頁面(Splash Page http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci213036,00.html)中圖片,或者是一些設計喜歡的居中設計的網站等。最原始的解決辦法就是把元素在窗口中距左和距上邊緣進行50%的絕對定位。當然這只是把元素的右上角移動到了窗口的中央,接下來你還需要設置負的margin-left和margin-top並且使它們的值剛好是寬和高的一半來把元素拉加到屏幕的中央。

讓我們看一下舊式做法的例子並注意一下其中的不足:

  1. html,body{   
  2.     height:100%;   
  3.   margin:0;   
  4.  padding:0;   
  5. }   
  6. body{   
  7.   background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;   
  8.     text-align:center;   
  9.     min-width:626px;   
  10.   min-height:400px;   
  11. }   
  12. #vert-hoz{   
  13.   position:absolute;   
  14.     top:50%;   
  15.   left:50%;   
  16.  margin-top:-198px;/* half elements height*/  
  17.    margin-left:-313px;/* half elements width*/  
  18.    width:624px;   
  19.   height:394px;   
  20.  border:1px solid silver;   
  21.   background:#666;   
  22.   overflow:auto;/* allow content to scroll inside element */  
  23.     text-align:left;   
  24. }   
  25. h1 {color:#fff;margin:0;padding:0}  
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}
  1. <div id="vert-hoz">  
  2.  <h1>Content goes here</h1>  
  3. </div>  
<div id="vert-hoz">
	<h1>Content goes here</h1>
</div>

你可以在這里看到線上演示,效果如下圖:

圖1

    為了頁面美觀起見我給各元素添加了一些背景顏色,這里我們真正感興趣的是灰色居中部分(此外,你應該注意到為了使背景圖片居中你應該設置html、body的高度為100%)。
    如圖1所示,這個結果正題我們想要的,元素在水平和垂直方向上都完美地實現了居中。文章中已經提到,對元素絕對定位使其top和left值都為50%,然后使用負的頂部填充和左側填充並使填充的值為高和寬的一半。
   盡管看起來沒有什么問題,但是使用這種方法存在幾個嚴重的不足,水平或者垂直縮小窗口你就會發現這個問題了。當窗口縮小到比元素還要小時,元素就會開始從窗口的上部和左側滑出。滑出的部分即使是使用窗口的滾動條也無法可見。這就意味着使用較小屏幕的用戶根本看不見這些內容。
    圖2顯示了當窗口縮小時例子中單行文本發生的變化。

圖2


    文本上部有一半丟失,左側也有一部分不見了。如果我們進一步縮小窗口,整個文本會完全消失。為了達到我們最初的目的,試着給body增加min-height和min-width屬性,但是你會發現這根本沒有任何效果,元素依然會滑出窗口之外。

修正后的方法

面對這些問題,一個類似居中技術可以供我們采用,它依然采用了對於頂部的絕對定位,但是對於水平居中使用的是自由浮動。這會限制元素從窗口的左側滑出。
下面是修正后的代碼:

  1. html,body{   
  2.     height:100%;   
  3.   margin:0;   
  4.  padding:0;   
  5. }   
  6. body{   
  7.   background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;   
  8.     text-align:center;   
  9.     min-width:626px;   
  10.   min-height:400px;   
  11. }   
  12. #vertical{   
  13.   position:absolute;   
  14.     top:50%;   
  15.   margin-top:-198px;/* half main elements height*/  
  16.   left:0;   
  17.    width:100%;   
  18. }   
  19. #hoz {   
  20.     width:624px;   
  21.   margin-left:auto;   
  22.  margin-right:auto;   
  23.     height:394px;   
  24.  border:1px solid silver;   
  25.   background:#666;   
  26.   overflow:auto;/* allow content to scroll inside element */  
  27.     text-align:left;   
  28. }   
  29. h1 {color:#fff;margin:0;padding:0}  
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;
}
#vertical{
	position:absolute;
	top:50%;
	margin-top:-198px;/* half main elements height*/
	left:0;
	width:100%;
}
#hoz {
	width:624px;
	margin-left:auto;
	margin-right:auto;
	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}
  1. <div id="vertical">  
  2.  <div id="hoz">  
  3.       <h1>Content goes here</h1>  
  4.     </div>  
  5. </div>  
<div id="vertical">
	<div id="hoz">
		<h1>Content goes here</h1>
	</div>
</div>

    可以在這里查看在線演示
    水平方向上已經達到我們所要的效果,但是當窗口高度縮小時頂部依然會消失,如圖3所示:

圖3

修正:

    為了解決這個問題(也是本文寫作的目的)我之前曾經使用過幾個比較復雜的方法,但是現在使用的這種方法更簡單、更健壯,那就是使用浮動(float)來代替絕對定位。
    頁面中設置為頂端50%絕對定位的第一個元素進行浮動。然后把浮動向上拉動,大小為元素高度的一半。
    下面是必要的修改:

  1. #vertical{   
  2.     float:left;   
  3.    height:50%;   
  4.    margin-top:-198px;/* half vertical height*/  
  5.    width:100%;   
  6. }  
#vertical{
	float:left;
	height:50%;
	margin-top:-198px;/* half vertical height*/
	width:100%;
}
  1. <div id="vertical"></div>  
  2. <div id="hoz">  
  3.    <h1>Content goes here</h1>  
  4. </div>  
<div id="vertical"></div>
<div id="hoz">
	<h1>Content goes here</h1>
</div>

這里有一個在線演示你可以自己觀察一下。

圖4

     重要的是我們對浮動元素設置的寬度是100%,並且記住由於某些瀏覽器會出現問題我們需要對后面的元素設置clear:both。如果我們不使用“float”,元素依然會居中但是它會從頂端消失掉。

為什么這樣可行呢?

    實際上這里涉及到浮動的一個有趣的行為,而且也比較好理解它的原理。為什么當我們使用一個靜態元素(或者是第一個示例中絕對定位元素)時內容會從窗口的頂端消失,而當我們使用float時卻不會產生這個問題呢?

    浮動的一個特點就是他們脫離了文本流(盡管你可以通過為后面的元素使用clear來重新控制它們)。浮動元素后面的內容會被移動以為浮動元素留空間(通常是通過瀏覽器對靜態頂部填充來清除浮動)。如果浮動元素根本沒有出現該位置,那么后面的內容會占居浮動元素原來在頁面中的位置。因此對一個浮動元素使用負的頂部填充(margin),浮動元素會沖破任何包含它的塊級元素限制,因為我們前面已經提到浮動元素一開始就脫離了文本流。但是如果我們把元素從包含它的塊級元素向外拖動足夠遠以至於它完全超出父元素范圍,那么它后面的任何元素將不會繼續跟隨其向上移動,但是重新設定包含塊級元素的內部內容的大小,會使浮動元素繼續浮動。

    這就是我們的例子中發生的事情,浮動元素被從body中向上移動,它后面的元素被迫留在body形成的塊級元素中。這可能有點難以直接去理解,但是我們可以看一下下面的這個演示。

  1. .float{   
  2.    width:200px;   
  3.   height:100px;   
  4.  background:red;   
  5.    float:left;   
  6. }   
  7. .top{   
  8.  background:green;   
  9.  height:300px;   
  10.  width:100%;   
  11. }   
  12. .follow-on{   
  13.    clear:both;   
  14.    background:blue;   
  15.   height:100px  
  16. }  
.float{
	width:200px;
	height:100px;
	background:red;
	float:left;
}
.top{
	background:green;
	height:300px;
	width:100%;
}
.follow-on{
	clear:both;
	background:blue;
	height:100px
}
<div class="top">Top</div>
<div class="float">Float</div>
<div class="follow-on">Following content</div>

    上面的代碼在頁面的頂端設置了一個靜態元素,其后是一個浮動元素,再后是其它的靜態內容,它就產生了如圖5所示的效果,或者可看在線演示

圖5

     沒有什么特別需要注意的,一切如同我們相像的一樣。

    如果下面我們給浮動元素增加一個負的100px的頂端邊距,我們就得到如圖6所示的結果:

  1. .float{   
  2.    width:200px;   
  3.   height:100px;   
  4.  background:red;   
  5.    float:left;   
  6.    margin-top:-100px  
  7. }  
.float{
	width:200px;
	height:100px;
	background:red;
	float:left;
	margin-top:-100px
}

圖6

仍然和我們料想的一樣,但是如果我們增加負的200px的頂端填充又會發生什么呢?

  1. .float{   
  2.    width:200px;   
  3.   height:100px;   
  4.  background:red;   
  5.    float:left;   
  6.    margin-top:-200px  
  7. }  
.float{
	width:200px;
	height:100px;
	background:red;
	float:left;
	margin-top:-200px
}

圖7顯示了結果:

圖7

    和你看到的一樣,浮動元素從后面的內容中移走,但是浮動元素后面的內容仍然會停留在包含它的元素的頂端(如在綠色元素的下面)。在我們的前面的例子中,當我們向外移動浮動元素時,也是發生了同樣的事情。

    但是如果我們從紅色的div去掉float屬性,那么紅色的div和它后面下面的內容就會被移動到綠色元素的上面。

圖8

    浮動元素負的邊距產生變化,后面的內容也會相應地向上移動。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: