引导3和垂直居中响应图像在div[重复]

Question

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

https://www.bootply.com/vQFalT6KxG

Answer 1

要在div内垂直对齐图像，必须将图像设置为绝对，将top设置为50%，并将垂直平移设置为-50%。我希望这有助于：

超文本标记语言

<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，并将verical align设置为middle。

超文本标记语言

<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;
}

Answer 2

试试这个：

<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>