水平/垂直跨瀏覽器居中圖像

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上運行時它搞砸了。 有人可以告訴我我的代碼有什么問題嗎，或者我需要如何重寫才能修復它？

小提琴

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/