一个网站上会有很多图片，在网站排版过程中，需要设置图片居中显示。通过CSS控制图片居中显示，包括水平居中与垂直居中。

图片的水平居中

图片的水平居中比较简单，也比较常见。就是使用外边距margin:0 auto来控制水平居中。（相关教程：CSS3控制图片自适应屏幕大小和居中显示）

.cont img{display:block;margin:0 auto;}

效果如下：

图片的垂直居中

要实现图片在一个区域垂直居中，需要设置图片所在区域的DISPLAY属性，把这个区域名转化成单元格，然后再通过垂直居中属性，让图片垂直居中。

具体代码如下：
html代码如下：

<div class="img_wrap">
<img src="wgs.jpg">
</div>

css代码如下：

.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}

效果如下：