在网页排版中，给网页图片设置垂直居中可不是一件很简单的事情。这里所说的图片，其宽度和高度都是不固定的，意思就是：无论图片的大小，一样要在网页中垂直居中，该怎么做呢？在一个单独的网页里面存在一张大小未知的图片，其设置不是那么简单的。

且看下图的效果：我们实现的就是这样的功能。

设置图片垂直居中的方法(在XHTML 1.0 transitional的条件下)：

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell（让标签元素以表格单元格的形式呈现，类似于td标签。），这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。

HTML代码如下：

<div>
<span><img src="http://www.c36.cn/images/demo.jpg"></span>
</div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->