css垂直居中实现方法大全

摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
line-height：
  b/ |5 H/ a9 z' M5 c代码如下:
<style>
* g; F5 g5 ^7 N* H8 O$ a, V, R.content {
6 H: }6 |2 r7 J* t# Z- A4 Yheight:240px;
+ p! h1 Q9 \, s. S' cline-height: 240px;
5 j; j6 M1 S! K( w/ n}
0 l& h! m* \- M! l</style>
, Y$ M  l& i* n  _- B% x+ c3 _<div class=content>
vertical-align:middle;
</div>
:before：
/ \* N0 \# t; I' B* U) ?代码如下:
6 J. R  P/ ^& Y# ]# s6 D  a5 R/ ^<style>
9 }: m- e4 Z2 V7 Y% m.content {
height: 240px;
}
.child:before {
/ Y' D3 t# z6 m* S# \, E+ V9 Z8 u  e( f- zcontent: ' ';
! {1 x% ?% s8 B2 @6 R, C5 p1 Jdisplay: block;
( p6 @! |4 ^6 X7 |3 S. `3 Yheight: 120px;
}
5 V5 m* l  b! f1 P! U</style>
<div class=content>
; x% ?( X* l$ p* U6 b<div class=child>
vertical-align:middle;</p> <p></div></div>
4 W& h3 y+ g& _% S: Y7 {# Ipadding-top：
代码如下:
( M; ~7 U6 N% n1 z<style>
.content {
height:240px;
  C5 ^4 l* z8 F) h+ H) d4 s# S9 c}
.child {
% S5 A0 Z4 J2 {+ y" |. J7 Q" v7 r( Cpadding-top: 120px;
6 T- S9 |3 d6 R: C9 }  w1 _; k}
</style>
2 Q1 Z0 y  j% z8 R/ ^<div class=content>
! X) y7 Z# Z$ @, G% H- z6 o<div class=child>
vertical-align:middle;
</div>
" `, O2 f; z9 c" I' \! w  m</div>
position:absolute：
  A: W! B+ U) o/ Y代码如下:
<style>
6 F* X4 R% K& B' |6 u" N.content {
9 j0 l/ T- P+ _5 O; M( J2 z6 C$ B4 ^position:absolute;
height:240px;
6 ^: X( h$ `6 C! s3 k9 d% R: [}
.child {
position: relative;
2 m+ i6 j- J6 U% n" M* Ttop:50%;
3 P$ w$ R  y3 ]+ J* O}
</style>
: r/ x) X, ?8 M' a<div class=content>
! k. U; I% m$ G) B8 T<div class=child>
vertical-align:middle;
+ {4 A: r" o1 }9 D& K% L</div>
</div>
# W& z) X9 [9 D0 P+ N8 ?/ @/ Gdisplay:table-cell;
/ n4 t: N9 z6 \4 R代码如下:
<style>
#content {
display:table;
}
#child {
display:table-cell;
( E) b% m7 n" u& I3 q. K  [* hvertical-align:middle;
. N2 ]3 |% x) Aheight: 300px;
}
</style>
& ^/ Y5 D8 Q6 d: v' w<div id=content>
' q5 z: N8 V- e# k* u* }<div id=child>
vertical-align:middle;
1 s/ P( ?1 B) T9 s$ j</div>
</div>
) f: y# c- O2 Q( }0 f小结：
! v, e6 b/ f  V( d% m2 q以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。

" W" X% u/ [, N3 I更多网页制作信息请查看： 网页制作

哦~~~明白了....

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

要睡觉了 呵呵

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

晚安 别让小嫁再郁闷了 -

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

呵呵 都没人想我~~

哈 你逗逗他啊

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