[综合类] CSS网页布局DIV水平居中的各种方法

kaysnoopy

红颜

管理员

Rank: 12

红颜

爱心勋章爱国勋章

发短消息
加为好友
当前离线

楼主大中小发表于 2008-6-4 20:32 只看该作者

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

在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法： www.520diannao.com% `$ R$ ]7 Z! M5 Q/ ]

　　一、margin:auto 0 与 text-aligh:center 我爱电脑技术论坛6 L! y" f6 |$ N
我爱电脑技术社区--打造最好的电脑技术自学交流平台0 y" M: V8 u$ `5 m$ W
　　在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即：
我爱电脑技术社区--打造最好的电脑技术自学交流平台- l0 i# y5 P# d5 ]
#wrap { margin:0 auto;} " W7 x$ B$ R- p! w. }" N
我爱电脑技术论坛( r; ~+ ]% {/ \% Y+ H& s- D
　　上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：
我爱电脑技术社区--打造最好的电脑技术自学交流平台, b. X0 Z7 _  R( G# R3 j5 \! i
＜!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＞
＜title＞ new document ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞ 8 R" V% b2 F4 A$ h- Y. S* D
＜style type="text/css"＞电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 |: L9 n' R3 d) K
div#wrap { ) ?9 p$ B: m7 D/ ^1 S' ]
width:760px;
margin:0 auto; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站1 W% M  o3 \4 r$ Z) y4 X
border:1px solid #333; 我爱电脑技术社区--打造最好的电脑技术自学交流平台' w4 z# \+ w, {" ?9 @8 j
background-color:#ccc; 我爱电脑技术社区--打造最好的电脑技术自学交流平台, c# |  L/ U2 `' r
} 我爱电脑技术社区--打造最好的电脑技术自学交流平台4 w2 p4 A% d& {# f& t" ^
＜/style＞打造最好的电脑自学交流论坛& b- c' s9 P4 D+ ~  [1 J$ m( P
＜/head＞我爱电脑技术社区--打造最好的电脑技术自学交流平台& }. ~7 ^! J, t# G
＜body＞打造最好的电脑自学交流论坛4 O2 I1 |) D8 s
＜div id="wrap"＞
打造最好的电脑自学交流论坛5 h7 l+ ^: H6 h; l& E
　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可打造最好的电脑自学交流论坛" u8 o* P3 a% e
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站( v; E2 l! _$ S. I& a
＜pre＞我爱电脑技术社区--打造最好的电脑技术自学交流平台. B: m1 n9 r8 c: t! V
div#wrap {
width:760px; www.520diannao.com; E4 A  u  r% Q6 M
margin:0 auto; /*这里的0可以任意值*/ 我爱电脑技术论坛% I  \1 g) ]1 M4 A
border:1px solid #ccc;
background-color:#999; 我爱电脑技术论坛  a( n/ t6 P) r& C
}
＜/pre＞电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 u1 D1 \) u& ]6 T* c; J
＜/div＞我爱电脑技术论坛7 o# k+ H2 V2 o2 D- T
＜/body＞ www.520diannao.com: r5 x3 e, U8 o' a7 i$ U6 V& t& S
＜/html＞
打造最好的电脑自学交流论坛+ d% b: i' R' J0 S3 e
　　上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码： www.520diannao.com9 P' l4 h  X: ?4 }$ ?

body {text-align:center;}
#wrap {text-align:left;} 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 z) [  \% R- W
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站) o- r* l* ]/ L8 A8 p" Y1 a8 ~  r
　　这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：我爱电脑技术社区--打造最好的电脑技术自学交流平台% n) u) a# T% Z, m6 ^# f1 C$ T

body { text-align:center; } 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站1 U/ M! S+ ~$ B& U
#wrap { text-align:left; 打造最好的电脑自学交流论坛2 o5 t; V  F3 k7 q, y: s- Y8 C
margin:0 auto; www.520diannao.com9 W; ]0 F/ h: U
}
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ www.520diannao.com" U# m& l6 Z1 }; t2 }- A
＜html xmlns="http://www.w3.org/1999/xhtml"＞我爱电脑技术社区--打造最好的电脑技术自学交流平台5 c4 T2 P' ?( T- b, P- ^
＜head＞

＜title＞ CSS+Div实现水平居中对齐的页面布局＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞ 2 D3 Z7 E$ q* P! g
＜style type="text/css"＞我爱电脑技术论坛& I# n5 L* l& v" P' u( b4 I
body { text-align:center; }
div#wrap { www.520diannao.com* y' ^, x5 {8 V* J' j( U
text-align:left; 8 n3 g; V' d& z# ]( w
width:760px; 7 X! l5 x/ \1 h1 ^
margin:0 auto; www.520diannao.com* j0 Y8 H& N7 {6 ?" [. K3 E* {3 X% ^
border:1px solid #333; www.520diannao.com) k7 o5 V/ Z0 k+ v
background-color:#ccc;
} 打造最好的电脑自学交流论坛+ r( q4 E7 u6 m6 ~% I7 d+ O$ O! v
＜/style＞打造最好的电脑自学交流论坛3 i/ Z  m" i/ v) q
＜/head＞
＜body＞
＜div id="wrap"＞
我爱电脑技术社区--打造最好的电脑技术自学交流平台' c/ M1 \+ p) \/ [
　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可 9 ^8 f8 c. }( Z4 B* e

＜pre＞
div#wrap { 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站7 Z6 C8 ~% [( n, _1 Z
width:760px; 9 Z5 h# ^4 w) q5 S: E9 i, f
margin:0 auto; /*这里的0可以任意值*/
border:1px solid #ccc;
background-color:#999;
} 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 t3 {. h5 f: m6 o1 ^, q

　　在Internet Explorer 6 及以下的版本中我们还要做以下的设置：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站* B: F3 p, {+ Z6 M) Y

body { text-align:center; } 1 \0 W0 G2 |( x9 P- \# H. j
div#wrap {
text-align:left;
}
＜/pre＞ www.520diannao.com) |" b/ v( ^2 o
＜/div＞ www.520diannao.com" V5 ~6 I4 {/ `, u, u4 I
＜/body＞ www.520diannao.com3 a6 A2 ~- P0 }9 W
＜/html＞
我爱电脑技术社区--打造最好的电脑技术自学交流平台7 M" F+ B  f( x$ [7 u. a7 ]# `  t
　　不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。
我爱电脑技术论坛$ o/ ~3 Z4 F, Y9 a/ L
我爱电脑技术社区--打造最好的电脑技术自学交流平台; ~0 s$ c& n  Z' N5 w9 f' i8 M

　　二、相对定位与负的边距
我爱电脑技术论坛% ]+ E9 L5 M8 S. p
　　对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现： www.520diannao.com' e/ F1 `( |/ ]* b; X+ \
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 W! c" O! q" K( _9 M
#wrap {
position:relative;
width:760px;
left:50%; www.520diannao.com! D8 r4 y4 J! M9 j' g3 U( M
margin-left:-380px 我爱电脑技术论坛  v! ^1 ?/ N8 ?' f+ [
}
& R- j) s- I7 b7 k+ z1 B8 l
　　这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞我爱电脑技术论坛) U* X6 _  a2 H" y6 e
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜title＞ CSS+Div实现水平居中对齐的页面布局＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞ www.520diannao.com3 l, S3 H( Z* Z  ~; T& z
＜style type="text/css"＞   d' i! e# g7 e4 S
div#wrap { " t" W5 W; B/ t3 I% [& K
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #333;
background-color:#ccc; 我爱电脑技术论坛6 K  p( Z" w# H- T  X
} 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站. ?, e) v" m/ z! t: A
＜/style＞ $ ~, e! O1 p3 J. F0 W1 {" d
＜/head＞我爱电脑技术论坛$ h6 z. c( P" A& ?* M
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站- _% C* e# N7 |; d& q. b3 a
＜body＞ / B! {, q: h- k' v: ~1 V5 e: A; s( f
＜div id="wrap"＞ www.520diannao.com+ d- e% z) X" o7 ?$ P  s

　　在所有浏览器中都有效的方法：我爱电脑技术论坛7 I4 j" v( Q; N: t+ }! m* L+ h

＜pre＞
div#wrap { 打造最好的电脑自学交流论坛5 ^2 F, Y2 l* @  c
position:relative; 打造最好的电脑自学交流论坛/ y3 W7 y0 _1 _* M6 b  G# j7 P; t
width:760px;
left:50%; 打造最好的电脑自学交流论坛: y7 }9 v3 m/ ~" N" O1 k( A
margin-left:-380px;
border:1px solid #333; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站: e- u! m6 f% z* \0 X( ?
background-color:#ccc;

}
＜/pre＞ ( {4 A0 A9 p( G' v, M! W
＜/div＞
＜/body＞
＜/html＞打造最好的电脑自学交流论坛6 M' x# u9 ]" E3 P& @5 T

　　同样，在设定水平居中前你需要设定一个固定的宽度。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 W1 U) P5 k: Y. H9 c- U9 t7 z
我爱电脑技术社区--打造最好的电脑技术自学交流平台0 L3 i! [* L! F0 ^" v
　　P.S.究竟选择哪个方法？
我爱电脑技术论坛, V% L! \0 \3 ^) F2 i
　　上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。
9 ?9 |" y5 g0 \7 n4 g4 Q

　　三、其它的居中方式
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站# z! U; j& l5 Z2 [1 i1 n, c+ u
　　上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：
我爱电脑技术论坛, O- k) a+ Z" i4 w
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：我爱电脑技术论坛5 {2 W# j3 X+ D, k( {6 }

body {
padding:10px 150px; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站" L0 X+ B" a9 V+ C6 P: I
} 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站) `( l4 @( g1 A4 q' A/ d1 H

　　这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。

＜!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"＞打造最好的电脑自学交流论坛+ o" i) h  _7 Q7 p' k
＜head＞ www.520diannao.com: Q  k# L$ j9 i5 ^* ?
＜title＞随浏览器窗口大小而改变的具有弹性的居中布局＜/title＞我爱电脑技术社区--打造最好的电脑技术自学交流平台+ u" O% j/ S, k9 N; Y& [2 I& @0 X
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞ * e0 w$ q1 ?. T' ?: W7 d$ _3 i
＜style type="text/css"＞
body {
padding:10px 150px;
} 我爱电脑技术论坛4 Y, y6 V: d- H1 L
div#wrap { 我爱电脑技术论坛. ?) @- _; T6 K: G0 F4 v
border:1px solid #333; 我爱电脑技术论坛4 i8 l4 t* J# ?* b& l! U" {7 p
background-color:#ccc; 6 Y% G# }9 ^( z! ~
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞ www.520diannao.com" i- B& L5 ], O. `: r( B

　　一种随浏览器窗口大小而改变的具有弹性的居中布局：
我爱电脑技术论坛. _  {- G) Z2 `4 u
＜pre＞ www.520diannao.com2 l( e3 A+ ^  n. g
body {
padding:10px 150px; 打造最好的电脑自学交流论坛$ [% i* K/ |  U, @+ w
} www.520diannao.com7 y# j: e) R& l* v' V

　　这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
我爱电脑技术论坛5 i" H- z8 {/ i% p- n0 d* W
＜/pre＞我爱电脑技术社区--打造最好的电脑技术自学交流平台2 Y# v, t" f0 l8 z/ I4 R
＜/div＞
＜/body＞
＜/html＞电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 _7 t' W9 i' [( ]
打造最好的电脑自学交流论坛: D& R; e0 _. _1 S
　　当然这只是“貌似居中”，不过却常常很有用处。

TOP

‹‹ 上一主题 | 下一主题 ››