css垂直居中实现方法大全

摘要：
* U4 p9 m4 ^3 A# T1 N在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
9 u7 L4 Q6 M8 R6 Fline-height：
代码如下:
<style>
2 T: o% z* G  d* e9 \.content {
height:240px;
& e* ?5 `& X! g: Z2 Lline-height: 240px;
}
' {2 }: R* j9 f# u</style>
<div class=content>
8 t0 E3 f* b- ~vertical-align:middle;
</div>
:before：
代码如下:
<style>
+ Z( `" L1 u' G- o9 l' o0 k0 L.content {
* S0 c2 H. t! {- yheight: 240px;
2 _4 P$ e; {! q6 q7 x}
.child:before {
content: ' ';
/ S3 u9 L4 D: a6 V- m9 y9 \8 y( |display: block;
: O  i% E" f6 X; Kheight: 120px;
}
8 }1 l6 U4 P6 E3 n) _3 q</style>
& I% n) L! X9 [3 r<div class=content>
<div class=child>
vertical-align:middle;</p> <p></div></div>
padding-top：
代码如下:
: C/ o3 J" R/ n' K8 ]5 c9 A( R<style>
.content {
7 w& e% Y# x6 R% t! I, ]height:240px;
" b# O# [9 q5 b4 T% j, y}
8 k7 ^! V3 g. M7 k.child {
/ h9 F9 ~# @! ?/ M8 E& npadding-top: 120px;
}
</style>
<div class=content>
5 k7 E0 i- Y7 t7 {% F<div class=child>
; Q% ^: p6 U$ lvertical-align:middle;
</div>
  O' m% R' u1 N  k/ n0 k</div>
position:absolute：
代码如下:
7 p' T  P9 T/ ^<style>
5 M9 b( T3 j$ K7 K2 J0 g.content {
  Z1 Z3 ]2 Y& ]% i" eposition:absolute;
height:240px;
$ z4 q. E5 ?$ o: ?2 Q0 h: M# }}
& t( t! `( z) D/ Z& M1 B.child {
$ s+ M/ q/ x7 S2 G3 e- Q4 `position: relative;
( B. w9 }8 t4 [( a# Etop:50%;
, A* Z5 J3 E/ o- G! W- d9 D( c0 C3 [, ]}
</style>
  A8 i7 Q3 R+ X$ ]( R<div class=content>
<div class=child>
5 w+ T, U* A9 V7 fvertical-align:middle;
; K7 z- m+ [, C+ \</div>
</div>
' N1 p0 b  B, N* U, {" Y2 f: r7 D- E" Pdisplay:table-cell;
代码如下:
0 x+ @2 T, E' q/ }) }4 t: C5 |<style>
, G7 I: U* p+ X) }% O/ c3 p+ k$ q#content {
- |/ _! d; X3 y4 \1 R/ cdisplay:table;
}
#child {
display:table-cell;
+ M* \* B4 n/ w0 fvertical-align:middle;
height: 300px;
* A8 a; r' I  x2 @% v* p7 p. L; H}
</style>
<div id=content>
0 f" v, c% n1 A5 F8 p6 L5 ?<div id=child>
! e( L* b8 q' B; I& Hvertical-align:middle;
</div>
8 ^/ @4 j$ I6 w$ T3 e</div>
# u, J, {0 }6 w; `' c8 a+ a! c- c( D2 p小结：
以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。
" s3 G' q8 q% [% G
$ }( m8 Q6 n1 a更多网页制作信息请查看： 网页制作

哦~~~明白了....

这是安慰我啊~~还是垮我啊???怎么感觉又被扁了啊

要睡觉了 呵呵

楼主，你要继续努力啊！你是bbs的希望啊！你是网络文学的希望啊！你是整个网络界的希望文学界的希望啊！你是整个人类的希望啊！你是整个太阳系的希望啊！你是整个异次元空间的希望啊！

晚安 别让小嫁再郁闷了 -

看起来好~~像啊~~~~~

呵呵 都没人想我~~

哈 你逗逗他啊

我不是来抢沙发的，也不是来打酱油的。