水平/垂直居中的图像跨浏览器

Question

我遇到了需要帮助的CSS问题。 我在目录中有许多不同大小的图像，我动态列出它们显示以下视图:(我只显示两个图像作为示例）

继承我的HTML：

<div class="image">
    <div class="image_container">
        <div class="image_overlay">
            <img src="http://i60.tinypic.com/n2ig5j.jpg" alt="">
        </div>
    </div>
    <div class="footer">
        <div>SOME TITLE</div>
    </div>
</div>
<div class="image">
    <div class="image_container">
        <div class="image_overlay">
            <img src="http://i59.tinypic.com/wri2s9.jpg" alt="">
        </div>
    </div>
    <div class="footer">
        <div>SOME TITLE</div>
    </div>
</div>

和CSS

.image {
    width: 245px;
    height: 235px;
    margin: 15px;
    float: left;
    border: 1px solid #ccc;
    box-shadow: 0 0 15px #ccc;
}

.image .image_container {
    text-align: center;
    display: table;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.image .image_container .image_overlay {
    display: table-cell;
    text-align: center;
    height:180px;
    vertical-align: middle;

}

.image .image_container .image_overlay img {
    max-width: 80%;
    max-height: 100%;
}

.footer{
    text-align:center;
}

它在Chrome上运行得很好，但是当我在Firefox上运行它时会搞砸。有人能告诉我我的代码有什么问题，或者我需要重写它以便修复它吗？

FIDDLE

Answer 1

像这样添加table-layout: fixed

.image .image_container {
    text-align: center;
    table-layout: fixed;
    display: table;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

请参阅小提琴http://jsfiddle.net/urhxxqpm/3/

还有更多内容：http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/