如何在相对定位的容器内垂直居中图像？答案

【问题标题】：how to vertically center an image inside of a relatively-positioned container?如何在相对定位的容器内垂直居中图像？
【发布时间】：2023-04-01 19:55:01
【问题描述】：

我想在下面的 HTML 中将图像垂直居中，使其垂直居中于它旁边的 div ("rtUpdateContentDiv")。 img 和 div 都在父容器“rtUpdateContainerDivActive”内。

<div class="rtUpdateContainerDivActive">
     <img class="statusImg" src="images/icons/Knob-Valid-Green.png">
     <div class="rtUpdateContentDiv">
          <span class="rtBlueHighlight">date and time:</span>
          ipsum lorem text here
    </div>
</div>

这是到目前为止图像的 css：

.statusImg
{
     position: absolute;
     margin-top: auto;
     margin-bottom: auto;
     vertical-align: middle;
     padding-left: 3px;
     padding-top: 3px;
}

和容器：

.rtUpdateContainerDivActive
 {
     background-color: #90ee90;
     margin-top: 1%;
     position: relative;
     min-height: 38px;
 }

父母需要保持相对关系。

如何使图像垂直居中 (38px x 38px)？

感谢您的帮助！

【问题讨论】：

标签： html css positioning centering

【解决方案1】：

解决方案1：

.parent{
    display: inline-table;
    height:100%;
}

.middleChild{
    display: table-cell;
    vertical-align: middle;
}

解决方案2：

.statusImg
{
     position: absolute;
     height:38px;
     top:50%;
     margin-top:-19px;
}

希望对您有所帮助...

【讨论】：

【解决方案2】：

您可能想阅读此http://css-tricks.com/centering-in-the-unknown/ 最后一种方法可能是您需要的。

【讨论】：

【解决方案3】：

将top: 50% 与图像高度一半的margin-top 结合使用：http://jsbin.com/adiseq/1/edit

【讨论】：