css垂直居中实现方法大全

摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
line-height：
代码如下:
  W; y" `8 o2 j. q$ |) J* ~3 g5 r' h<style>
.content {
height:240px;
line-height: 240px;
}
7 O! p4 ]5 E+ l) v9 G- @# b+ c' w</style>
8 ~% x2 j' C3 H+ p3 Z<div class=content>
7 ]0 w- w! v- avertical-align:middle;
</div>
:before：
代码如下:
<style>
2 h: R- Y7 i$ p$ V1 v$ ~.content {
height: 240px;
' _0 d! b& _% o: `}
! ], K+ @$ X) h; G: K2 }0 ~  \.child:before {
1 ~$ t3 C: J" P/ |9 y- dcontent: ' ';
' a, [) @  S) }7 x7 ]display: block;
height: 120px;
}
, z6 {& N( O' ^+ @) Z- J</style>
8 d6 |7 v6 _/ W  G5 E4 I- c% J( R3 G<div class=content>
* E" `: S1 j5 q# c' C) m<div class=child>
vertical-align:middle;</p> <p></div></div>
7 P6 i' O, @6 F2 lpadding-top：
代码如下:
, d8 s$ E& o8 H0 m6 {<style>
$ x% H7 g- d4 ]5 w) {.content {
" K3 c# k8 Z+ r0 N6 y1 x/ bheight:240px;
}
.child {
. o$ X! V0 k. V3 _9 w/ X$ F8 Wpadding-top: 120px;
}
5 J/ e) R* F6 W: h</style>
<div class=content>
) E; s9 W+ g* `# H" c7 _/ J<div class=child>
9 |7 @/ @  |; W* Overtical-align:middle;
</div>
  K; t5 o+ W9 ]0 j9 m# E5 T( x</div>
position:absolute：
代码如下:
+ a+ a) F& D$ k3 ]& a<style>
.content {
position:absolute;
) E# S; }% ^2 ^0 X: O# ^  qheight:240px;
& O" ]- D  B, F4 x2 A}
.child {
2 T8 K, i. c$ I: z* f5 \" yposition: relative;
top:50%;
}
</style>
<div class=content>
<div class=child>
vertical-align:middle;
</div>
</div>
display:table-cell;
- P0 t  Y. ~: e% R( G代码如下:
<style>
+ k9 `' s1 F- L! }" D; c#content {
3 o9 W# j0 t% M; f1 `: Idisplay:table;
0 d, n, }7 ?3 [; T% D3 E! U, \9 j}
#child {
display:table-cell;
vertical-align:middle;
height: 300px;
1 Q; ^4 h& P) d}
! \$ V! o* }. [( s0 x0 Z</style>
<div id=content>
<div id=child>
+ x1 e( U/ U) M9 A' _2 F0 yvertical-align:middle;
' j* v( N4 y. L% |% |</div>
</div>
. h  V* f/ v' G( }4 L小结：
以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。
2 q6 j- Q: R4 w
更多网页制作信息请查看： 网页制作

哦~~~明白了....

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

要睡觉了 呵呵

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

晚安 别让小嫁再郁闷了 -

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

呵呵 都没人想我~~

哈 你逗逗他啊

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