图片水平居中实现起来比较简单，margin:0 auto即可。垂直居中相对麻烦些，可通过以下两种方法实现。
一、传统方法
利用表格居中方式，关键的样式如下
.table {
display: table;
width: 100%;
height: 100%;
}
.table .container {
background-color: #d7d7d7;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.table .container img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
二、CSS3方法
CSS3方法主要使用了transform，缺点是兼容性，移动端开发可以考虑使用。关键的样式如下
.container {
width: 100%;
height: 100%;
background-color: #d7d7d7;
}
.container img {
position: relative;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
