效果图

TIM截图20170724105801.png

方法有很多很多很多很多种，在这介绍两种：

1. 将图片容器转为表格单元格：**table : table-cell **

• html

<div class="box">
  <img scr="your image">
</div>

• css

.box {
  width: 400px;
  height: 400px;
  border:1px solid #eee;
  display: table-cell; /* 将容器转为表格单元 */
  vertical-align: middle; /* 设置容器垂直对齐方式，居中 */
  text-align: center;
  /* 兼容ie7 */
  *display: block;
  *font-size: 349px; /* 400 x 0.873 (为什么是0.873，我猜...) */
  *font-family: Arial; 
  background: #d5d5d5;
}
.box img {
  vertical-align: middle;
}

2. 将图片设置为图片容器的背景图将图片定位属性设置为center

background:url(your image) center no-repeat