css垂直居中实现方法大全

摘要：
在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
( U" U$ p* g/ [8 nline-height：
) i" {% g, N% m& b# F9 s) f+ V代码如下:
<style>
- \3 L% V$ Y7 ?' h# V.content {
7 ?! K0 d+ b& Fheight:240px;
6 n% G$ E! s) V# h& B& O5 M! ^line-height: 240px;
}
</style>
8 z" a# Y0 |; X<div class=content>
vertical-align:middle;
' Z; c8 K0 J( o$ |% Z</div>
:before：
9 K5 [; k/ ]- t9 M3 a0 z  O- a代码如下:
7 G. |% z; Q, |; o<style>
  m7 \. [  n* y2 W! W0 @- @.content {
height: 240px;
}
.child:before {
content: ' ';
display: block;
8 _& E4 w2 h0 ~8 W- K2 x2 x; ~height: 120px;
% G' J7 k8 A5 p3 F}
* |4 g3 M# w2 r+ d, d7 G- W</style>
* J% ?1 P7 e' s' o$ K- s1 z/ l% Y5 Z<div class=content>
<div class=child>
& P9 m  v* B7 P3 Gvertical-align:middle;</p> <p></div></div>
; H4 C9 M( Z0 s1 E, B2 ppadding-top：
代码如下:
' L8 U+ p7 Z/ K' M0 ]( |# k<style>
.content {
" n" h) u, t2 T/ rheight:240px;
4 k5 c3 O, x* D1 G, g# G; U}
) a* w# t% j* _.child {
6 G8 w) J6 w- H' M7 K, Ypadding-top: 120px;
}
' U% s) A& ?* J- e7 e0 i1 N</style>
; E* c, P' U6 H7 K3 d<div class=content>
<div class=child>
( Z% y# {  n  ]. w. uvertical-align:middle;
</div>
% d) J* l8 q0 |</div>
position:absolute：
: h. G6 V# \4 c* O% M1 A代码如下:
) q# n6 l3 E7 {6 f0 V/ ?<style>
.content {
position:absolute;
height:240px;
( T% J& [* `3 f/ m}
% \1 u! f4 S6 ].child {
position: relative;
top:50%;
$ n) o9 T8 T9 J  r}
</style>
<div class=content>
<div class=child>
vertical-align:middle;
8 o7 x8 z1 n$ U5 b8 \4 r, D  @" t</div>
</div>
+ ^  g/ a% T0 G: L5 [, B, s. cdisplay:table-cell;
( }5 Q: H7 |3 I代码如下:
<style>
  ~4 ]! X3 j* c$ R2 Z9 [' x#content {
  K3 x* B; M/ P8 Odisplay:table;
% A6 |0 F' F. `# S# A}
7 J$ T; W5 v6 ?8 I: l#child {
display:table-cell;
0 T. ~8 _% U4 Wvertical-align:middle;
height: 300px;
}
</style>
- i( J9 s9 B! }! }<div id=content>
  o' t. O3 A8 F* \# `0 t, }# W& e<div id=child>
" Q, f. V0 q% a# w1 t! s/ W, k. avertical-align:middle;
</div>
</div>
# ~. o* v8 C5 @3 r  l小结：
# O( z$ U# v$ g, r以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。
4 e" i4 r# _7 Q
9 e% N8 Y( A; j" Y更多网页制作信息请查看： 网页制作

哦~~~明白了....

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

要睡觉了 呵呵

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

晚安 别让小嫁再郁闷了 -

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

呵呵 都没人想我~~

哈 你逗逗他啊

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