考虑到img高度，居中img答案

【问题标题】：Center an img taking into account the img height考虑到img高度，居中img
【发布时间】：2015-06-22 16:39:04
【问题描述】：

考虑到图像的高度，是否可以在 div 中将图像居中。

HTML

<div class="holder">
    <h3>Article 1</h3>
    <div class="tl">
        <img src="http://placehold.it/144x70"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

<div class="holder">
    <h3>Article 2</h3>
    <div class="tl">
        <img src="http://placehold.it/144x50"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

<div class="holder">
    <h3>Article 3</h3>
    <div class="tl">
        <img src="http://placehold.it/100x15"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

CSS：

.holder {
    width: 144px;
    height: 215px;
    float: left;
    margin: 10px 10px 50px 10px;
    padding: 2px;
    border: 1px solid #000;
    position: relative;
}

h3 {
    margin: 4px 0 20px 0;
}

h4, p{
    margin: 0;
}

h3, h4, p {
    text-align: center;
}

.tl {
    text-align: center;
    height: 100px;
    position: relative;
    top: 12%;
    transform: translateY(-12%);
}

p {
    padding: 0 3px;
    line-height: 18px;
}

.foot {
    width: 144px;
    position: absolute;
    top: 197px;
}

我在这里做了一个jsfiddle：https://jsfiddle.net/abn94Ldo/1/

我希望所有图像的中心点对齐，以便每个 img 占位符（144x70 等）中的文本对齐。

【问题讨论】：

我提供了两个选项。使用其中任何一个。如果需要任何澄清，请告诉我。

标签： html css layout

【解决方案1】：

您可以通过两种方法来实现这一点[顺便删除 .tl div 的顶部值]，

制作 img position:absolute 并将所有边设置为 0 和 margin:auto。

img{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin:auto;
}

参考jsfiddle Link

将tl设为display:table；并添加一个带有display:table-row 的孩子和另一个带有display:table-cell 的内部；现在您可以使用vertical-align: middle 使图像位置居中；

参考jsfiddle Link

【讨论】：

【解决方案2】：

我会使用转换：

img {
position: relative;
top: 50%; // vertical placement according to preference
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

https://jsfiddle.net/draquL3p/

绝对定位和表格布局看起来都有些老套（虽然很常用）。我自己的选择是仅在需要旧版浏览器支持时才使用它们。

【讨论】：

【解决方案3】：

使用定位对齐图像在中间。 Demo

.tl img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

【讨论】：

【解决方案4】：

试试这个： https://jsfiddle.net/abn94Ldo/3/

.tl {
       vertical-align: middle;
       display: table-cell;
       text-align: center;
       margin-bottom: 30px;
       height: 70px;
       position: relative;
       top: 12%;
       transform: translateY(-12%);
       width: 144px;
       margin: 0 auto;
}

【讨论】：