CSS制作图片水平垂直居中

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

.imgWrap li {
background: #ffa url(images/gridBg.gif) repeat center;
width: 219px;
height: 219px;
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
text-align: center;
}
.table {
width: 100%;
height: 100%;
display: table;
position: relative;
}

.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.imgWrap a {
display: block;
*position:relative;
*top: -50%;
*left: -50%;
}

CSS

4、jQuery方法实现图片居中

这个方法很简单，就是得用jQuery方法，将图片转换为其父元素的背景图片，并且在其父元素中居中显示背景图片，然后在将其自身的透明度设置为“0”， 这样也能达到图片居中的效果。

Html Markup

<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a></li>
</ul>

CSS Code

.imgWrap li {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
background: #ffa url(images/gridBg.gif) repeat center;
}
.imgWrap a {
width: 219px;
height: 219px;
display: block;
}

jQuery Code

//先写一个小插件
$.fn.imgVAlign=function(){
return $(this).each(function(i){
//获取图片的src值，并定义给变量bg
var bg = $(this).attr("src");
//给图片的父元素定义背景图片的样式，并且背景图片
$(this).parent().css({"background": "url("+ bg +") no-repeat center center"
});
//将图片隐藏
$(this).css("opacity","0");
});
}
//调用上面写的插件
$(document).ready(function(){
$(".imgBox img").imgVAlign();
});