记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。
方法一
html
<div class="demo1"><img src="图片路径" alt="" /></div>
css
.demo1 { width:180px
;
height:
180
px
;
line-height:
180
px
;
*
font-size:
160
px
;
border:
1
px
solid
#ddd
;
text-align:
center
;
}
.demo1
img
{
vertical-align:
middle
;
}
PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。
方法二
html
<
div
class
=
"
demo2
"
><
img
src
=
"
图片路径
"
alt
=
""
/></
div
>
css
.demo2
{
width:
180
px
;
height:
180
px
;
display:
table-cell
;
vertical-align:
middle
;
*
font-size:
160
px
;
border:
1
px
solid
#ddd
;
text-align:
center
;
}
.demo2
img
{
vertical-align:
middle
;
}
PS：font-size同上等于盒子height乘以差不多0.873的数值，IE7以上版本及其他高级浏览器均支持display的table-cell。
方法三
html
<
div
class
=
"
demo3
"
><
div
class
=
"
demo3_inner
"
><
img
src
=
"
图片路径
"
alt
=
""
/></
div
></
div
>
css
.demo3
{
display:
table
;
position:
relative
;
text-align:
center
;
height:
180
px
;
width:
180
px
;
border:
1
px
solid
#ddd
;
}
.demo3
_
inner
{
display:
table-cell
;
vertical-align:
middle
;
position:
absolute
;
top:
50
%
;
.demo3
_
inner
img
{
position:
relative
;
top:
-
50
%
;
left:
-
50
%
;
}
.demo3
>
.demo3
_
inner
{
position:
static
;
}
.demo3
>
.demo3
_
inner
>
img
{
position:
static
;
}
PS:相对定位加绝对定位实现IE6/7，display的table-cell实现高级浏览器。
如果要放文字
html
<
div
class
=
"
demo4
"
><
div
class
=
"
demo4_inner
"
><
p
>
如果是文本,需要添加一标签来实现，我这里添加的是p。
</
p
></
div
></
div
>
css
.demo4
{
display:
table
;
position:
relative
;
height:
180
px
;
width:
180
px
;
border:
1
px
solid
#ddd
;
text-align:
center
;
}
.demo4
_
inner
{
display:
table-cell
;
vertical-align:
middle
;
position:
absolute
;
top:
50
%
;
}
.demo4
_
inner
p
{
position:
relative
;
top:
-
50
%
;
left:
-
50
%
;
}
.demo4
>/
**
/
.demo4
_
inner
{
position:
static
;
}
.demo4
>/
**
/
.demo4
_
inner
>
p
{
position:
static
;
}
