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>
实现效果如下：
一行文字可以通过line-height和高度相同来实现垂直中心对齐，图片的话可以给图片添加vertical-align:middle来实现，示例如下：
<style>p{line-height:100pxhieght:100pxtext-align:center}
div{height:200pxtext-align:center}
div img{vertical-align:middlewidth:80pxheight:80px}
</style>
<p>示例文字</p>
<div><img src="图片"/></div>
如果是多行文字的话就得用到CSS的表格特性来做，示例如下：
<style>.box { position: relative width: 200px height: 200px margin: 40px auto 0 auto background: #282d33 border: solid 1px #171717 box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.4) color: #bbb }
.box .tag { position: absolute top: -11px left: 70px width: 60px height: 20px background: #1b1b1b border: solid 1px #171717 text-align: center }
/* IE6+ 支持图片和多行文字水平垂直居中 */
.ie_imgText { display: table width: 200px height: 200px text-align: center *position: relative }
.ie_imgText .cell { vertical-align: middle display: table-cell *position: absolute *top: 50% *left: 50% }
.ie_imgText .content { *position: relative *top: -50% *left: -50% }
</style>
<div class="box">
<div class="ie_imgText">
<div class="cell">
<div class="content">
<img src="图片" alt="">
<p>文字文字</p>
<p>文字文字文字</p>
</div>
</div>
</div>
</div>
div是不能定义垂直对齐,也就是V-ALIGN的!所以,
1:要看你DIV里面是什么内容,解决方法可以是使用FLOAT,浮动,把里面的元素浮动,然后定义MARGIN-TOP之类的
2:还可以在DIV里面放个TABLE,再在TABLE里面放内容,因为TABLE是支持垂直对齐V-ALIGN的
