如何在相對定位的容器內垂直居中放置圖像？

Question

我想將圖像垂直居中置於下面的HTML中，以便它垂直居中（「rtUpdateContentDiv」）旁邊的div。 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; 
} 

父需要保持相對的。

如何垂直居中圖像（38像素x 38像素）？

謝謝你的幫助！

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

希望這將有助於...

Answer 2

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

Answer 3

你可能想閱讀這個http://css-tricks.com/centering-in-the-unknown/最後的方法可能是你需要的。