CSS网页布局DIV水平居中的各种方法(页 1) - 网站建设 - 我爱电脑技术论坛打造最好的电脑自学交流论坛

kaysnoopy 发表于 2008-6-4 20:32

CSS网页布局DIV水平居中的各种方法

在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：
%@2SE#j6X+a
　　一、margin:auto 0 与 text-aligh:center I@ o1@!z

　　在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即： t W [y6Y
:VS&D/y"E1~x
#wrap { margin:0 auto;} q\{Fo;G7Q

　　上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码： G:gRvO

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞ BYuqi*bl ]
＜head＞
＜title＞ new document ＜/title＞ I4Xg1hgN%m
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
div#wrap { +`8t LZ r]/Rzc
width:760px; q:_? nYt
margin:0 auto; ]T'dr;[b$VhL r5U.@3J
border:1px solid #333;
background-color:#ccc;
} 4u;r J9j9T|Q(qr
＜/style＞
＜/head＞ ]@%Y8?u6l:m/i2T*D
＜body＞ "e3]oU5_q;a
＜div id="wrap"＞ q-@CY)e7]

　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
^pO_ O @['eS
＜pre＞ ?}3]W%gM
div#wrap {
width:760px;
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
} D U;[5vdEn.BP2g~k
＜/pre＞ 9k7cY%Dy#^;Bd%q!U
＜/div＞ &t(w:Aay4z2am
＜/body＞ xAX@p
＜/html＞ 3K%zAz]-I:Z X
b%U4j&^4uF-B`#_ R#U
　　上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码：
X%\5}*d Yy(sM
body {text-align:center;}
#wrap {text-align:left;} 4d+QwG[.l
_ AV!RY6v
　　这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：

body { text-align:center; } 9r1S|s1u!{1xT.f
#wrap { text-align:left;
margin:0 auto; :_,MV`7@
} g&v,Q"H+Ch9N#q
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ }`b9@J9q"v
＜html xmlns="http://www.w3.org/1999/xhtml"＞ N(U4n)z^(S6rp*S1?4G
＜head＞
|(P|k.ZI ke
＜title＞ CSS+Div实现水平居中对齐的页面布局＜/title＞ p#p7LH/`_Lz#w$U|9n
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
body { text-align:center; } -PCsPK!I:X'D/x~ \
div#wrap { Y#Le1tX/^E9b0T0xx
text-align:left;
width:760px; Tuj1y#|+H
margin:0 auto;
border:1px solid #333; weD]N5E4~n
background-color:#ccc;
}
＜/style＞ 9^e8Y5X3y7c(A
＜/head＞
＜body＞ _wW:FV}~0N;W1H0S3x
＜div id="wrap"＞ 2xi*M5ZKX2BCPb
~,x5Jr(d"p
　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
J}%P(Uwv:CE
＜pre＞ /w4lb-gJ"Q5k B
div#wrap {
width:760px; wyU"P Kte5ICX!l1M
margin:0 auto; /*这里的0可以任意值*/ k rU,pU1FT$?l
border:1px solid #ccc; AOI5['\&X Z_#jw
background-color:#999; /b m#KU~
} 9D5wN2g1b&d6si0Z
y:Mq.E;J(w
　　在Internet Explorer 6 及以下的版本中我们还要做以下的设置：

body { text-align:center; } wd)IF4?TJe
div#wrap { Y,}}5bJ A%mF
text-align:left; 5j`/IyD2`or
} SV't)r;y2t6Oh] WT
＜/pre＞ rwOA+^,];H#Y.q
＜/div＞
＜/body＞ 9A4t.? U8IS
＜/html＞ FX[A:G
a C,o&Z)bYr}
　　不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。

　　二、相对定位与负的边距

　　对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：
OeC0KFp
#wrap { $EE2~e u%bN
position:relative; A9oI`(Zw8Ps'P(aO
width:760px;
left:50%; h6d ^)h$\X$Z
margin-left:-380px T/c9f ~VBo
} 2q6L\0Y/U`WL8M
'R?b"ylp8k
　　这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞ t G~;Xw&I
＜head＞
＜title＞ CSS+Div实现水平居中对齐的页面布局＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞ ,\J"g1@Z;I$b+G
＜style type="text/css"＞ O6Oz;f7si m*D6]0BU
div#wrap { .?e e/G]'\I!}+E
position:relative; sS$`:}L S@u4xb:C4m7x
width:760px;
left:50%; qbB/MR9OzD7q
margin-left:-380px; 1{&Ys qp"P
border:1px solid #333; *}:DQ:IlvJ
background-color:#ccc;
} zK-Ys {)x~+i Z
＜/style＞
＜/head＞ YV/])PT(Xn,M;g
O:~:Q9m'm,Z9K
＜body＞
＜div id="wrap"＞ 7] fh#y%o1O

　　在所有浏览器中都有效的方法： )S%d\4z9xEh/XY
^L+N qZ(d
＜pre＞
div#wrap {
position:relative; cv(Im m)R
width:760px;
left:50%; y!wE3EvS
margin-left:-380px; 'VdD"fWI%S{ J#f3F
border:1px solid #333; /Yg)u:vA~|
background-color:#ccc; Qn3[,R-p,aF$k

}
＜/pre＞ KBE5y"y*SeS
＜/div＞
＜/body＞
＜/html＞
0G/[x3`F&h7F
　　同样，在设定水平居中前你需要设定一个固定的宽度。 #BvwQ(vo(]+pl;d}

　　P.S.究竟选择哪个方法？ .OBK&P9k3YEd#Y
!Y+@ MB Y
　　上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。 ]#bLe#T&W W*B
O2q~ r!_{
omV_%ME#?]*P|zV
　　三、其它的居中方式 ~"G3uu7SP$u7^o
5}w``3d%k
　　上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小： :L#O0]&X{H
t&r}(bfn8y\
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：

body { BsE%^@P!R g$v9mI
padding:10px 150px;
}
Z0D"`w4X#Y%e~
　　这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
bK W$O+ZVc3y
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞ n;Q e~U
＜title＞随浏览器窗口大小而改变的具有弹性的居中布局＜/title＞ Yr]k5jX2s!i@
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞ )@9S9_ cfzf/k
＜style type="text/css"＞
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞ /gI;d(Z'i1H:}1x,CZ,R
＜div id="wrap"＞ 1e9n6~7Z(nRMJr{

　　一种随浏览器窗口大小而改变的具有弹性的居中布局： G-xg(CV

＜pre＞ !E?0luW/R.] @Q
body { S5w`sc?"h
padding:10px 150px;
}
+m(J[7q.Xz
　　这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。 /xBb(_ |j
A!yr:G m6k$X
＜/pre＞ /RLNe?#E?.P
＜/div＞ D[&J%p6W \?
＜/body＞ G#]&QHx.t6Y
＜/html＞

　　当然这只是“貌似居中”，不过却常常很有用处。

页: [1]

我爱电脑技术论坛's Archiver

CSS网页布局DIV水平居中的各种方法