css垂直居中实现方法大全

摘要：
# @, J! \+ m- X- b6 w在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
line-height：
, s$ Z6 j5 y1 ?# X7 C代码如下:
<style>
% d! l+ s! Z8 ?. q( R5 M# @.content {
height:240px;
) Q+ K) Z! S3 |line-height: 240px;
. p, ?! q* T. o0 n, j" e" P7 u}
</style>
0 r& v7 |3 \- f8 r3 _$ j9 }<div class=content>
vertical-align:middle;
</div>
9 S  V& M/ w/ T:before：
3 Z7 s% s- d, U代码如下:
<style>
.content {
height: 240px;
7 ]3 U& f2 g, \7 J+ K, i) I+ A* C}
.child:before {
content: ' ';
% E! D, {3 F$ h; o+ @display: block;
height: 120px;
  D( G: d- Z  P) {" j" x7 D6 X}
</style>
<div class=content>
<div class=child>
9 P7 n9 X. c% P. ]/ Dvertical-align:middle;</p> <p></div></div>
padding-top：
代码如下:
+ Z* t! H3 J. w) `<style>
$ q+ P7 [  j9 C/ L.content {
4 ]& a1 u* X$ ~, a0 }( K# H  w5 nheight:240px;
7 E9 S; S" z+ Z, x6 t' ]3 ~- Y}
.child {
4 w/ m. d8 [! u+ Upadding-top: 120px;
7 D( J  h. S3 v- e, y  |}
  Q/ t- |$ ?1 K0 `0 M</style>
<div class=content>
<div class=child>
/ P. {5 d, ^7 [* Ivertical-align:middle;
</div>
, k' p9 M; c6 i, W# _* I% S</div>
position:absolute：
0 _3 k2 n" n* \3 `: |" l& a代码如下:
<style>
.content {
- g( I+ x: h% z( V' \2 |7 wposition:absolute;
% V0 j& X! J- ~6 U/ {height:240px;
4 d* T) d8 ?4 E" a! {" y: r}
.child {
1 m; a0 D6 G+ [% k* eposition: relative;
5 x  N! W  T) xtop:50%;
; F4 z% g* ]) {5 G}
</style>
<div class=content>
<div class=child>
vertical-align:middle;
# y1 b8 S. v/ \: k</div>
( V4 S) a& X+ _3 E6 P6 g7 ?</div>
display:table-cell;
' P( R) t6 J# c3 s代码如下:
* }( ]. T' S: s% h<style>
' x* ^7 L$ ~0 |* i7 O9 h& `+ j#content {
6 ?) C) a( _/ W# Udisplay:table;
$ m6 Y' r; q7 a7 U+ u) X' z; U}
#child {
display:table-cell;
vertical-align:middle;
/ O0 B0 A( c* s2 a$ D7 Yheight: 300px;
9 e! w  l% j0 y& r. C}
</style>
  w! s! |6 k/ _" P& G<div id=content>
<div id=child>
vertical-align:middle;
, ]+ H$ J7 P" I! j& u- \& U</div>
$ B; t- K# u" c; {0 ~</div>
小结：
以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。

% C& F# F7 A7 P& U0 \更多网页制作信息请查看： 网页制作

哦~~~明白了....

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

要睡觉了 呵呵

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

晚安 别让小嫁再郁闷了 -

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

呵呵 都没人想我~~

哈 你逗逗他啊

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