如何使图像垂直漂浮在中间？

Question

我在这里使用引导程序设计。

我正在尝试执行以下操作。在这里，我手动将图像周围的div标签高度设置为与宽度相同。这样可以使图像上方和下方的空白相同。

但是，如果浏览器调整大小，图像的宽度和高度将相应改变。我无法设置固定的高度，因为图像将保持其大小，并且不会相应地调整大小。但是，如果我不设置它，图像将浮动到顶部，并且整个盒子的高度将与其余盒子的高度不同。

将填充底部和顶部设置为50％，以将比例设置为1：1，但这不起作用。 （这会使盒子变得比原来大，并弄乱了比例）

<div class="product">
<div class="product-img">
        <img src="http://127.0.0.1:8080/SpGames/admin/gameimage.jsp?game_id=1" alt="" style=""> 
    </div>
    <div class="product-body">
        <p class="product-category">Category</p>
        <h3 class="product-name"><a href="#">product name goes here</a></h3>
        <h4 class="product-price">$980.00 <del class="product-old-price">$990.00</del></h4>
        <div class="product-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
        <div class="product-btns">
            <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
            <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
            <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
        </div>
    </div>
    <div class="add-to-cart">
        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
    </div>
</div> 

整个盒子的高度应与其余盒子的高度相同，并且图像在中间应与其余盒子垂直对齐。

Answer 1

最好的跨浏览器方法是在两个元素上都使用高度为100％且垂直对齐为中的内嵌块帮助器。

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
    

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>

Answer 2

使用flexbox：

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}