图片垂直水平居中

效果预览：

HTML代码：

<div class="container middle">
  <a href="#">
    <img src="timg.jpg" class="show">
  </a>
</div>

CSS代码：

.container{
/* 此容器的宽高可根据自己的需求更改 */
   width: 800px;
   height: 600px;
   border: 1px solid #f00;
   /* 水平居中 */
   text-align: center;
}

.show{
  vertical-align: middle;
}

/* 以后所有的图片居中只需要使用这个类就ok了 */
.middle::after,
.middle::before{
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}