垂直居中图像答案

【问题标题】：Vertically centering image垂直居中图像
【发布时间】：2014-07-24 03:10:26
【问题描述】：

我知道有很多关于这个问题的帖子。阅读完所有这些后，我觉得我很接近，但它仍然不适合我。

HTML：

<div class="product">
  <div class="image">
    <a href="#">
        <img src="http://i.imgur.com/rthFtAb.jpg" />
    </a>
  </div>
</div>

CSS

.product {
    height:225px;
    min-height:225px;
    max-width:220px;
    background-color:#ff00ff;

}

.image {
    min-height:225px;
    display:table-cell;
    vertical-align:middle;
}

.image img {
    max-width:100%;
}

http://jsfiddle.net/SBqU5/

我在这里做错了什么？

【问题讨论】：

可能重复/类似的问题：*.com/questions/396145/…；在您的代码示例中，vertical-align 的使用无关紧要。

标签： html css vertical-alignment

【解决方案1】：

垂直居中的六种方法。选择你的毒药。您的方法将属于“表格”选项。

http://www.vanseodesign.com/css/vertical-centering/

行高

<div id="parent">
    <img src="image.png" alt="" />
</div>

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

表格

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

负边距

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

拉伸

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

等距

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

浮动分区

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>

#parent {height: 250px;}

#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}

#child {
    clear: both;
    height: 100px;
}

【讨论】：

【解决方案2】：

如果您使用display:table-cell; 和max-width;，则父级应为display:table; table-layout:fixed 和width:xxpx。 DEMO

.product {
    height:225px;
    width:220px;
    background-color:#ff00ff;
    display:table;
    table-layout:fixed;
}
.image {
    display:table-cell;
    vertical-align:middle;
}
.image img {
    max-width:100%;
}

【讨论】：

【解决方案3】：

如果您能够为图像定义宽度和高度，则可以使用 `position: absolute'。

.image {
    position: relative;
    height: 100%;

}

.image img {
    width: 220px;
    height: 105px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -110px;
    margin-top: -52px;

}

DEMO

请注意，负的左边距和上边距分别是其宽度和高度的一半。

【讨论】：