将div中间（垂直）中的图像与css对齐[重复]答案

【问题标题】：Align image in middle (vertical) of a div with css [duplicate]将div中间（垂直）中的图像与css对齐[重复]
【发布时间】：2016-11-14 23:43:42
【问题描述】：

我可以使用一些帮助，在容器 div 的中间对齐图像（不同大小）。制作了一张可以看到 div（灰色背景）并且图像应该居中对齐的图片。

如您所见，如果图像大小不同，它看起来会不好看。如何对齐中间（垂直）的所有图像以使其内联？

我不确定是否可以使用 position: absolute，因为我仍然希望图像自行调整大小（高度：自动和宽度：100%）。

HTML：

<div class="window column border small-12 medium-6 large-4 xlarge-3" *ngFor="#item of items">
            <div class="row">
                <div class="item-group">
                    <span>Fri fragt!</span>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-imagegroup">
                        <img src={{item.Image}} title="" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-descriptiongroup">
                        <div class="item-header">{{item.Header}}</div>
                        <div class="item-description">{{item.Description}}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">

                </div>
            </div>
            <div class="row">
                <div class="column small-6">

                </div>
                <div class="column small-6">

                </div>
            </div>
        </div>

CSS：

.item-imagegroup {
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
    vertical-align: middle; 
}

.item-imagegroup img {
    width: 100%;
    height: auto;
}

.item-image {
    margin-top: 1rem;
    margin-bottom: 1rem;     
}

已经固定了div，所以下面的文字也会对齐。不确定这里是否有更好的解决方案。

希望有人能给我一些建议。

【问题讨论】：

标签： html css

【解决方案1】：

vertical-align 仅适用于表格尝试制作一个 wrap div 并给它“display: table;” 并对包装 img 的 div 给出：“display: table-cell”

别忘了把它全部设为 100% 宽度和高度

编辑：

HTML：

<div class="item-imagegroup">
    <div class="item-tablecell">
        <img src={{item.Image}} title="" />
    </div>
</div>

CSS：

.item-imagegroup {
    display: table;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
}

.item-tablecell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

【讨论】：

不确定我是否关注您...您的意思是我应该将其包装在另一个 div 中并显示：table？
感谢您的帮助。谢谢。

【解决方案2】：

你可以试试

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这应该可行，假设您不是在寻找旧版支持。

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

【讨论】：