在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。 3 f+ d1 y5 A! V7 y9 }/ c
- H1 i/ w: c/ h* L% E/ \
直接上CSS代码：
. U2 k" \- \" E, N* ]5 P
- Q# G: G9 w2 A  Y9 L- @( L#pic { / G# [5 R4 a6 r' F
width:300px; 5 e1 m( {( B! i/ {0 K
height:300px;
. K  G/ R4 a5 o( k5 P( f+ abackground-color:green; $ L0 K3 w/ ^% R/ T9 R% b
border:6px solid #ccc;
" O/ E7 r% |# s7 o5 q8 @8 A8 Btext-align:center;
3 U4 E6 F( J" r3 N/ I$ mposition:relative; 8 S2 @3 T1 P/ U4 R/ M/ r' B' p4 I" d& x
display:table-cell; / \/ h8 H" D- r$ e9 S. g# I
vertical-align:middle;   Y4 W, r" @( q  I$ u1 P! \
}
* A7 U6 |0 z/ j' H( p2 [7 `#pic p {
5 ^7 e0 @  z, k9 }*position:absolute;
8 o2 y, N. N( jtop:50%;
; `: M' K+ n0 g1 Z' z4 e* T, ileft:50%; # H, B& b# L* R; x6 x5 M- \4 B
}
$ o# r, M/ N7 X* J3 o+ e#pic p img { 1 _" A! v  M) C+ g1 N  L0 F
*position:relative;
9 G+ x, c: ]; ]0 R& ~9 d- r% ctop:-50%;
1 K3 J. D2 C3 z4 H3 w/ z- Yleft:-50%; 5 O! T& T) l9 e' U" J5 O
} & }$ z4 n! @/ W7 _6 H1 V
  r# v2 p3 u" [% O
#pic是容器，里面放一个p容器，该容器采用绝对定位，最后插入图片，图片采用相对定位。   Y1 m, W. Q) _3 C7 ]6 T/ Z
注：这里用到了一个hack,*只有IE浏览器可以识别，Firefox不认识。
: V$ `" t; [% R; K5 v4 X

游客不能浏览全部内容,请马上:登录|没有帐号？入学

在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。 3 f+ d1 y5 A! V7 y9 }/ c
- H1 i/ w: c/ h* L% E/ \
直接上CSS代码：
. U2 k" \- \" E, N* ]5 P
- Q# G: G9 w2 A  Y9 L- @( L#pic { / G# [5 R4 a6 r' F
width:300px; 5 e1 m( {( B! i/ {0 K
height:300px;
. K  G/ R4 a5 o( k5 P( f+ abackground-color:green; $ L0 K3 w/ ^% R/ T9 R% b
border:6px solid #ccc;
" O/ E7 r% |# s7 o5 q8 @8 A8 Btext-align:center;
3 U4 E6 F( J" r3 N/ I$ mposition:relative; 8 S2 @3 T1 P/ U4 R/ M/ r' B' p4 I" d& x
display:table-cell; / \/ h8 H" D- r$ e9 S. g# I
vertical-align:middle;   Y4 W, r" @( q  I$ u1 P! \
}
* A7 U6 |0 z/ j' H( p2 [7 `#pic p {
5 ^7 e0 @  z, k9 }*position:absolute;
8 o2 y, N. N( jtop:50%;
; `: M' K+ n0 g1 Z' z4 e* T, ileft:50%; # H, B& b# L* R; x6 x5 M- \4 B
}
$ o# r, M/ N7 X* J3 o+ e#pic p img { 1 _" A! v  M) C+ g1 N  L0 F
*position:relative;
9 G+ x, c: ]; ]0 R& ~9 d- r% ctop:-50%;
1 K3 J. D2 C3 z4 H3 w/ z- Yleft:-50%; 5 O! T& T) l9 e' U" J5 O
} & }$ z4 n! @/ W7 _6 H1 V
  r# v2 p3 u" [% O
#pic是容器，里面放一个p容器，该容器采用绝对定位，最后插入图片，图片采用相对定位。   Y1 m, W. Q) _3 C7 ]6 T/ Z
注：这里用到了一个hack,*只有IE浏览器可以识别，Firefox不认识。
: V$ `" t; [% R; K5 v4 X

游客不能浏览全部内容,请马上:登录|没有帐号？入学