图片自适应大小垂直居中问题

图片水平居中实现起来比较简单，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%);
}

点击可查看完整示例