在列中垂直居中图像答案

【问题标题】：Vertically centering an image within a column在列中垂直居中图像
【发布时间】：2019-01-01 17:50:04
【问题描述】：

 .col-sm-6 {
     position: absolute;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
 }

<div class="col-sm-6">
    <img class="img-responsive img-rounded center-block" src="images/test.jpg" alt="">
</div>
<div class="col-sm-6">
    <h2 class="section-header">Title</h2>
    <p class="lead text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

我对 CSS 比较幼稚，目前我正在为我的目的重新安排一个模板网站。除了我不能相对于另一列的大小垂直居中列中的图像之外，我已经完成了所有工作。这可能吗？

我尝试了一些建议，但还没有运气。感谢您的帮助。

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
还有什么专栏？
@Paulie_D 谢谢我已经尝试将更多代码添加到堆栈 sn-p（不知道如何让它放入图像中）。列中的文本在不同容器中的长度不同，但我希望图像始终垂直居中。
您的第一个问题是使列的高度相同...here 有一个 SO Q&A，然后下面的 flexbox 解决方案将起作用。
如果您提供所需视图的示例（图像或其他内容），我们将为您提供帮助。

标签： css twitter-bootstrap-3

【解决方案1】：

试试这个：

   .col-sm-6 {
        display: flex;
        align-items: center;
    }

    img {
        height: auto;
    }

如果要水平对齐它们，请将justify-content: center; 添加到父类

【讨论】：

【解决方案2】：

你可以试试这个。设置样式如下。这样您就可以使图像中心对齐。

<style>
.col-sm-6 .img-responsive img-rounded center-block 
{
    margin: 0 auto;
}
</style>

【讨论】：