html - 动态图像垂直居中时遇到问题

Question

我需要将图像垂直居中，我提前不知道它的尺寸，所以我真正拥有的唯一选择是使用 tables 或 css table 我相信.

我想尝试一下 css 表，但我仍然无法让图像在其中垂直居中。

我的 HTML:

<div class="image">
    <div class="table">
        <div class="table_row">
            <div class="table_cell">
                <img src="https://pbs.twimg.com/profile_images/3560817062/a9bda79c4d2bfc3353a4fbc0a14e6080.jpeg" alt="Main Image">
            </div>
        </div>
    </div>
</div>

CSS:

.table {
    display: table;
    margin: 0px auto;
}

.table_row {
    display: table-row;
}

.table_cell {
    display: table-cell;
    vertical-align: middle;
}

.image {
    width: 411px;
    min-width: 411px;
    max-width: 411px;
    height: 341px;
    min-height: 341px;
    max-height: 341px;
    background-color: #f6f6f6;
}

.image img {

}

fiddle :http://jsfiddle.net/5DLuU/

我在这里做错了什么？

Answer 1

首先，您根本不需要 <div>对于表行，您只能使用 table-cell ，为了解决对齐问题，分配 height:100%对于表格和表格单元格:

.table {
    height:100%;
    display: table;
    margin: 0px auto;
}
.table_cell {
    height:100%;
    display: table-cell;
    vertical-align: middle;
}

检查这个 Demo Fiddle