CSS中實現DIV容器水平居中行之有效的辦法

作者：52css 2010-09-02 13:16:44

在Web標準中的頁面布局是使用DIV配合CSS來實現的，這其中最常用到的就是使整個頁面水平居中的效果，這里向大家描述一下實現DIV容器水平居中的方法。

本文向大家描述一下實現DIV容器水平居中的方法，在Web標準中的頁面布局是使用DIV配合CSS來實現的，其中最常用到的就是使整個頁面水平居中的效果，這是在頁面布局中基本，也是最應該首先掌握的知識，這里和大家分享一下。

DIV CSS教程：實現DIV容器水平居中的方法

在Web標準中的頁面布局是使用DIV配合CSS來實現的。這其中最常用到的就是使整個頁面水平居中的效果，這是在頁面布局中基本，也是最應該首先掌握的知識。不過，還是經常會有人問到這個問題，在這里我簡單總結一下使用DIV和CSS實現頁面水平居中的方法：

一、margin:auto0與text-aligh:center

　　在現代瀏覽器（如InternetExplorer7、Firefox、Opera等）現代瀏覽器實現水平居中的方法很簡單，只要設定到左右兩側的空白為自動即可。意即：

ExampleSourceCode

#wrap{margin:0auto;}

　　上面這段代碼的意思是說使wrap這個DIV到左右兩側的距離自動設置，上下為0（可以為任意）。請在現代瀏覽器（如InternetExplorer7、Firefox、Opera等）中運行現在的代碼：

SourceCodetoRun


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>52CSS.comtitle> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=UTF-8"/> 
<styletypestyletype="text/css"> 
DIV#wrap{  
 width:760px;  
 margin:0auto;  
 border:1pxsolid#333;  
 background-color:#ccc;  
}  
style> 
head> 
 
<body> 
<DIVidDIVid="wrap">

在Firefox等現代瀏覽器設定頁面元素的水平居中，只要指定margin:0auto;即可

<pre> 
DIV#wrap{  
 width:760px;  
 margin:0auto;/*這里的0可以任意值*/  
 border:1pxsolid#ccc;  
 background-color:#999;  
}  
pre> 
DIV> 
body> 
html>

[可先修改部分代碼再運行查看效果]

　　上面的效果很好。但是這在InternetExplorer6及改正的版本中是不起作用的，不過幸好它有自己的解決辦法。在InternetExplorer中text-align屬性是可繼承的，即在父元素中設置后在子元素中就默認具有了該屬性。因此我們可以在body標簽中設置text-align屬性值為center，這樣頁面內所有的元素都會自動居中，同時我們還要加一個hook把頁面中的文字變成我們習慣的閱讀方式——居左對齊。因此我們要如此來寫代碼：

ExampleSourceCode

body{text-align:center;}  
#wrap{text-align:left;}

　　這樣在InternetExplorer中我們就輕松實現了DIV的居中對齊。因此要在所有的瀏覽器中顯示居中的效果，我們就可以這樣寫我們的代碼：

ExampleSourceCode

body{text-align:center;}  
#wrap{text-align:left;  
margin:0auto;  
}

SourceCodetoRun


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>52CSS.comtitle> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
<styletypestyletype="text/css"> 
body{text-align:center;}  
DIV#wrap{  
 text-align:left;  
 width:760px;  
 margin:0auto;  
 border:1pxsolid#333;  
 background-color:#ccc;  
}  
style> 
head> 
 
<body> 
<DIVidDIVid="wrap">

在Firefox等現代瀏覽器設定頁面元素的水平居中，只要指定margin:0auto;即可

<pre> 
DIV#wrap{  
 width:760px;  
 margin:0auto;/*這里的0可以任意值*/  
 border:1pxsolid#ccc;  
 background-color:#999;  
}

在InternetExplorer6及以下的版本中我們還要做以下的設置：

 body{text-align:center;}  
 
 DIV#wrap{  
 text-align:left;  
 }  
pre> 
DIV> 
body> 
html>

[可先修改部分代碼再運行查看效果]

　　不過這里有一個前提，就是設置居中的元素要有固定的寬度，比如這里我們設定了為760像素。#p#

二、相對定位與負的邊距

　　對于wrap進行相對定位，然后使用負的邊距抵消偏移量。這種方法比較簡單還很容易實現：

ExampleSourceCode

#wrap{  
position:relative;  
width:760px;  
left:50%;  
margin-left:-380px  
}

　　這段代碼的意思是，設置wrap的定位是相對于其父元素body標簽的，然后將其左邊框移動到頁面的正中間（也就是left:50%含意）；***我們再從中間位置向左偏移回一半的距離來，這樣就實現了水平居中了。

SourceCodetoRun


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>52CSS.comtitle> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
<styletypestyletype="text/css"> 
DIV#wrap{  
 position:relative;  
 width:760px;  
 left:50%;  
 margin-left:-380px;  
 border:1pxsolid#333;  
 background-color:#ccc;  
}  
style> 
head> 
 
<body> 
<DIVidDIVid="wrap">

在所有瀏覽器中都有效的方法：

<pre> 
DIV#wrap{  
 position:relative;  
 width:760px;  
 left:50%;  
 margin-left:-380px;  
 border:1pxsolid#333;  
 background-color:#ccc;  
}  
pre> 
DIV> 
body> 
html>

[可先修改部分代碼再運行查看效果]
　　同樣，在設定水平居中前你需要設定一個固定的寬度。

◆究竟選擇哪個方法？

　　上面兩個方法究竟選擇哪種方法好呢？在***種方法中貌似使用了Hack技術，其實并沒有，它是中規中矩的Web標準寫法，完全符合規范，因此，兩個種方法中完全可以隨便的選取其中的任一種進行使用，他們不存在CSShack的問題。#p#

三、其它的居中方式

　　上面所說的都是設定了具體寬度的情況下水平居中的實現。有時候我們想做一個彈性布局，或者當一個元素處于一個容器中時我們只想讓它居中并不想設定一個具體的寬度。其實這并不是真正的居中布局，就像對一個100%長度的元素來說，你說它是居中對齊還是居左對齊呢？所以所有不高寬度的居中都不是真正的居中。這樣的設計我們是使用的像元素的padding來設置的，實際中我們是改變了父元素的容器大小：
如我們希望wrap元素長度隨窗口而改變，同時又維持居中，我們就可以這樣寫：

ExampleSourceCode

body{  
padding:10px150px;  
}

　　這里，我們只需要保持父元素左右兩側的填充是相等的就可以了。

SourceCodetoRun


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>52CSS.comtitle> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
<styletypestyletype="text/css"> 
body{  
 padding:10px150px;  
}  
DIV#wrap{  
 border:1pxsolid#333;  
 background-color:#ccc;  
}  
style> 
head> 
 
<body> 
<DIVidDIVid="wrap">

一種隨瀏覽器窗口大小而改變的具有彈性的居中布局：

<pre> 
body{  
 padding:10px150px;  
}  
 
這里，我們只需要保持父元素左右兩側的填充是相等的就可以了。  
pre> 
DIV> 
body> 
html>

　　當然這只是“貌似居中”，不過卻常常很有用處。

【編輯推薦】

CSS中實現DIV容器垂直居中方法揭秘
CSS布局中float和position屬性使用技巧
四種方法輕松實現CSS隔行換色
CSS Sprites對CSS布局的意義及優缺點
CSS布局中display:inline-block屬性用法詳解

責任編輯：佚名來源： 52css.com

CSS 水平居中