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

Posted 2023-03-05

【中文标题】Bootstrap 3和div中垂直居中的响应图像[重复]

【英文标题】：Bootstrap 3 and vertically centering responsive image in div [duplicate]

【发布时间】：2017-12-25 22:02:05

【问题描述】：

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

https://www.bootply.com/vQFalT6KxG

【参考方案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;

【讨论】：

谢谢你，为我工作。