CSS控制图片水平居中与垂直居中
一个网站上会有很多图片，在网站排版过程中，需要设置图片居中显示。通过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;
}
效果如下：
