转自：http://zhidao.baidu.com/question/131571863.html?qbl=relate_question_2
问：
问：
比如500*500的div我想插入一张400*400的图片，希望图片在div的中间 。在图片的周围都和div有空隙
答：
元旦快乐啊.....
LZ真有心，在元旦居然问如此复杂的问题。不过LZ问到了，我就说一种我个人用的方法。
水平居中很简单，垂直居中就很困难，网上方法很多，不过都存在这样那样的兼容性问题，要么就要引入一些其他元素。考虑到后期图片自动缩放，外容器浮动等等因素，然后只利用代码，不引入其他元素。于是我在网上思路的基础上，自己写了下面的方法。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片居中</title>
<style>
*
{
padding: 0px;
margin: 0px;
}
/*好懂吧，宽高定义，文本居中。*/
.conn
{
width: 500px;
height: 500px;
border: 1px solid #000;
text-align: center;
}
/*这个LZ自己研究研究，我定义了一个高100%的块元素用来对齐img*/
.imgmid
{
display: inline-block;
*display: inline; /*解决ie6、ie7、ie8的兼容问题*/
*zoom: 1; /*解决ie6、ie7、ie8的兼容问题*/
height: 100%;
width: 1px;
margin-left: -1px;
vertical-align: middle;
}
/*好懂吧，img元素宽高，然后垂直居中对齐。*/
.conn img
{
width: 400px;
height: 400px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="conn">
<img src="boy.jpg">
<span class="imgmid"></span>
</div>
</body>
</html>另一种利用伪类提供了更简洁的实现方法：
详见：http://blog.csdn.net/chelen_jak/article/details/20549953
CSS代码：
<span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span><span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">width<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">300<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">300<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">background-color<span class="after">:</span></span><span class="css-color-spec" style="color: rgb(0, 0, 255); "><span class="before">#</span>beceeb</span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">font-size<span class="after">:</span></span>0; *<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">200<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">text-align<span class="after">:</span></span>center;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
<span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span> img<span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">vertical-align<span class="after">:</span></span>middle;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
<span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span><span class="css-pseudo-class" style="color: rgb(119, 119, 119); "><span class="before">:</span>after</span><span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">display<span class="after">:</span></span>inline-block; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">width<span class="after">:</span></span>0; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">100<span class="after">%</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">content<span class="after">:</span></span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>center<span class="after" style="color: rgb(0, 68, 0); ">"</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">vertical-align<span class="after">:</span></span>middle; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">overflow<span class="after">:</span></span>hidden;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>HTML代码：
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255); ">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204); ">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119); ">=</span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>pic_box<span class="after" style="color: rgb(0, 68, 0); ">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255); ">img</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204); ">src</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119); ">=</span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg<span class="after" style="color: rgb(0, 68, 0); ">"</span></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">/></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255); ">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">></span>