Bootstrap 3和div中垂直居中的响应图像[重复]答案

【问题标题】：Bootstrap 3 and vertically centering responsive image in div [duplicate]Bootstrap 3和div中垂直居中的响应图像[重复]
【发布时间】：2017-12-25 22:02:05
【问题描述】：

如何使图像在 Div/Row 中垂直居中。我已经搜索过了，但所有的解决方案似乎都表明这是一个很好的解决方案——但它对我不起作用。我正在使用 Bootstrap 3...

https://www.bootply.com/vQFalT6KxG

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

<div class="col-xs-12 col-xs-offset-6">
      <img src="https://image.flaticon.com/icons/png/128/149/149019.png" class="img-responsive">
</div>

【讨论】：

【解决方案2】：

要在 div 内垂直对齐图像，您必须将图像设为绝对值，将顶部设置为 50% 并将垂直转换为 -50%。我希望这会有所帮助：

HTML

<div class="vertical-align-img">
   <img src="https://image.flaticon.com/icons/png/128/149/149019.png" />
</div>

CSS：

.vertical-align-img{
    height: 500px;
    position: relative;
}

.vertical-align-img img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

或者您可以使用display: table-cell;。将 display 设置为 table-cell，并将 verical-align 设置为 middle。

HTML

<div class="vertical-align-img">
   <img src="https://image.flaticon.com/icons/png/128/149/149019.png" />
</div>

CSS

.vertical-align-img{
    display: table-cell;
    height: 500px;
}

【讨论】：

谢谢你，为我工作。