css垂直居中实现方法大全

摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
9 B5 {, q  [2 H* X/ Wline-height：
代码如下:
<style>
( ^: `) D$ ]1 d: y.content {
height:240px;
8 r' C2 c4 \# |! i) F  ?1 W/ J  z" ~line-height: 240px;
}
</style>
' X  j* `& g! h9 @. M<div class=content>
vertical-align:middle;
% W5 ^" h) R/ R( p/ I</div>
% o6 {$ d8 a  N3 ^8 w, r:before：
# J: D4 b# [8 G0 M. {, r代码如下:
0 h( \( R2 V& q: d2 b1 b4 B  H, M3 D8 v<style>
.content {
height: 240px;
3 C* e. O9 a" q1 t2 i}
2 V! B; }" R. g3 m.child:before {
content: ' ';
: Z9 ~+ G9 H! N5 Q' tdisplay: block;
height: 120px;
}
9 O  v& t$ M* d" n4 }</style>
% }6 R4 Q4 Z( h7 \9 Q<div class=content>
+ J! ~. Z5 U, _* j" z$ V6 V<div class=child>
vertical-align:middle;</p> <p></div></div>
+ w  J& F0 B" Ypadding-top：
4 j' X1 ]- p( M7 Q! P# V代码如下:
<style>
.content {
. T3 ]4 }5 g2 D; H% t# p, cheight:240px;
0 C5 v* d  a8 ?8 \6 a1 Q( g+ J3 F}
5 ~9 A* b4 ?9 J" V.child {
padding-top: 120px;
% ?9 [4 C7 P9 O+ A3 T  a}
. h0 j. I7 x. T</style>
<div class=content>
; t2 H8 S0 u  Z+ d! U<div class=child>
vertical-align:middle;
: |$ O% @2 x3 J</div>
</div>
2 L- ~, E2 e+ n% Bposition:absolute：
. X2 V3 S; d2 W代码如下:
  u" g4 X: I, W7 s4 \<style>
.content {
position:absolute;
height:240px;
}
.child {
position: relative;
top:50%;
6 s( ^& _9 v0 h! w, v' O; T}
! Z. k8 h0 H, B0 C</style>
<div class=content>
: O" j$ r6 M' N) q<div class=child>
/ }5 l2 w9 f. D+ v  _$ }; `+ Z# ?! N- {$ _vertical-align:middle;
</div>
</div>
display:table-cell;
% S" @% M! w, K7 k代码如下:
3 C* W$ |6 L, }<style>
: Q4 Z4 R9 \5 k#content {
display:table;
3 V& ^' T+ U- i}
: F+ `  N# a* M( U4 B#child {
/ r1 F8 w3 c! t: p1 S1 Idisplay:table-cell;
, O. R5 B; N. }) G0 [) ^vertical-align:middle;
- E+ Y! \6 K1 R6 T( dheight: 300px;
}
" s+ j/ M0 O  _8 a9 h2 C</style>
. R3 g: X. @: a6 y1 _<div id=content>
8 E5 K) e1 h' X& d& i<div id=child>
vertical-align:middle;
</div>
</div>
( l! ?0 _  ?! ]/ v! `! I小结：
以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。

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

哦~~~明白了....

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

要睡觉了 呵呵

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

晚安 别让小嫁再郁闷了 -

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

呵呵 都没人想我~~

哈 你逗逗他啊

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