居中对齐div中的图像

Question

HTML

<div class="image-container">
   <img class="image" src="image.png">
</div>

CSS

.image-container {
    width: 95px;
    height: 95px;
    background: #000000;

    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    align-items: center;

    -webkit-justify-content: center;       
    justify-content: center;
}

.image {
    max-width: 95px;
    max-height: 95px;
}

这适用于Chrome和Safari，但不适用于Firefox。它不会保持整个div和纵横比的填充。如何在Firefox上使用它？

Chrome / Safari

火狐

Answer 1

由于您的.image高度拉伸图像。像这样改变你的CSS。

.image {
    width:100%;
}

Answer 2

.image {
 max-width: 95px;
}

或

.image {
 width: 100%;
   }

Answer 3

.image{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Answer 4

为了使其跨浏览器，您可以使用以下方法：检查工作JsFiddle demo here

只需要CSS：

.image-container {
    width: 95px;
    height: 95px;
    background: #000000;
    display: table-cell;
    vertical-align: middle;
}

.image {
    width: 100%;
}