css垂直居中实现方法大全

摘要：
* D$ R/ ^8 |$ r  ~; Y% Q在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
line-height：
8 Q+ T* e, x$ }3 B: Y& R: V4 W代码如下:
<style>
.content {
, Y% D( J3 {' v. ~height:240px;
, i  C0 ^0 p: s" Wline-height: 240px;
}
</style>
<div class=content>
" t  Z/ B! z  O, ~& |' avertical-align:middle;
' A; B6 I& e6 k8 x9 z; f</div>
:before：
代码如下:
1 N  K* ?8 M  w% H* V6 \: A<style>
.content {
2 h* {* _2 Z+ H5 w$ Nheight: 240px;
}
# r9 d7 P: t4 p.child:before {
content: ' ';
6 R0 f& ]' r/ Y* f+ adisplay: block;
. S. L, j' q# _" z; V, i0 M% O8 aheight: 120px;
}
</style>
1 s' L' T% g, P  k3 ]4 X<div class=content>
<div class=child>
vertical-align:middle;</p> <p></div></div>
padding-top：
8 F3 i' K" p1 K; H/ Y# |代码如下:
6 |  ~5 Y8 ^$ W' F<style>
& D/ ]3 D7 n; M9 `1 I! }.content {
4 R$ K# N; K3 t, X3 I' \! e# m4 @+ Iheight:240px;
0 h3 k) G( o; ~! b) g1 [3 [}
.child {
padding-top: 120px;
9 J/ E) n4 s: q. n" F}
- O; U, k4 T" ]  G- k) Y7 Z</style>
<div class=content>
<div class=child>
vertical-align:middle;
</div>
  I# ^6 v$ ]; Y$ |2 e* y9 k</div>
+ D- G) p; \2 Pposition:absolute：
代码如下:
<style>
.content {
6 e- D+ r8 w! ~3 R  v! Zposition:absolute;
) l6 x' _/ y8 H% L4 k5 eheight:240px;
}
.child {
( h/ b; X& e  F! Y6 u5 kposition: relative;
top:50%;
}
</style>
<div class=content>
9 {  H7 t) r6 t. M" [, ?/ m<div class=child>
2 i5 t: x9 x' H0 E+ J% Cvertical-align:middle;
</div>
. s* Z' ~1 ]3 O: @; X7 u9 Q* t' c$ z</div>
$ y7 E7 t0 e( j  rdisplay:table-cell;
代码如下:
- Z: t7 L; V) M( p" s3 p2 u: v<style>
/ I0 w+ Z8 \3 r; Y6 N  \5 D#content {
! `* S: j0 ^& p# ~9 r, u# q" ^display:table;
* d, Q# s4 f# ^3 o" x4 b}
8 r6 A% B1 N1 o1 N7 a; s#child {
) v! ~$ k' x5 c, l+ sdisplay:table-cell;
2 {' _  e9 c% Q( K4 y0 vvertical-align:middle;
height: 300px;
! m5 O: A& |: H- ~: I}
</style>
; L# |$ d1 U' H' b<div id=content>
<div id=child>
vertical-align:middle;
</div>
</div>
8 v7 ]: }+ h9 E& g4 N8 ^小结：
以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。

更多网页制作信息请查看： 网页制作

哦~~~明白了....

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

要睡觉了 呵呵

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

晚安 别让小嫁再郁闷了 -

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

呵呵 都没人想我~~

哈 你逗逗他啊

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