使用css对齐div的中间（垂直）图像

Question

我可以使用一些帮助，将图像（不同大小）对齐到容器div的中间位置。已经做了一个图片，你可以看到div（灰色背景），图像应该在中间对齐。

正如你看到的，如果图像的大小不同，也不会好看。我如何对齐中间的所有图像（垂直）以便它们内联？

我不确定我可以使用position：absolute，因为我仍然希望图像自己调整大小（height：auto & width：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固定的，所以在同样的文本对齐。不知道这里是否有更好的解决方案。

希望有人可以给我一些建议。

Answer 1

vertical-align只适用于表格 尝试制作一个div div并给它“display：table;” 并于包裹IMG给DIV： “显示：表单元格”

不要忘记将它的所有宽度为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%; 
} 

Answer 2

你可以试试

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

这应该可行，假设您没有寻找遗留支持。

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