方法一：
思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
<div>
<img src="images/tt.gif" width="150" height="100" />
</div>
CSS样式如下：
div {width:300pxheight:150pxbackground-color:#CCCborder:#000 1px solidtext-align:centerpadding-top:50px}
释义：
图片的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCCborder:#000 1px solid为DIV加个边框和背景色，便于观察效果。
text-align:center,实现图片的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div {width:225pxheight:150pxbackground-color:#eeeborder:#000 1px solidpadding-top:50pxpadding-left:75px}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。
结构代码同上；
CSS代码如下：
div {width:300pxheight:150pxbackground-color:#eeepadding-top:50pxborder:#000 1px solid}
img {display:blockmargin:0 auto}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block然后利用margin:0 auto实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中
HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：
所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：
1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。
2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。
完整例子：
html代码：
<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>
css代码：
<style type="text/css">
.imgWrap li {
float: left
border: solid 1px #666
margin: 10px 10px 0 0
list-style: none
border-collapse: collapse
}
.imgWrap a {
background: #ffa url(images/gridBg.gif) repeat center
width: 219px
height: 219px
display: table-cell/*图片容器以表格的单元格形式显示*/
text-align: center/* 实现水平居中 */
vertical-align: middle/*实现垂直居中*/
}
.imgWrap a:hover {
background-color: #dfd
}
.imgWrap img {
border: solid 1px #66f
vertical-align: middle/*图片垂直居中*/
}
</style>
实现效果如下：
