div中的图像居中对齐答案

【问题标题】：Center aligning image in divdiv中的图像居中对齐
【发布时间】：2015-02-14 17:30:58
【问题描述】：

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

火狐

【问题讨论】：

将图像的宽度设置为 100%，将高度设置为自动通常可以解决问题
在 Firefox for mac 上运行良好

标签： css image firefox alignment center

【解决方案1】：

因为您的.image 高度拉伸了图像。像这样改变你的CSS。

.image {
    width:100%;
}

【讨论】：

【解决方案2】：

.image {
 max-width: 95px;
}

或

.image {
 width: 100%;
   }

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

只需要 CSS：

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

.image {
    width: 100%;
}

【讨论】：