流體 - 水平和垂直對齊的圖像相對於其包裝

Question

在這fiddle，我在dark-blue包裝中的圖像，我希望它是相對於其包裝水平和垂直對齊70％。我試過使用table-cell，它似乎不起作用。

HTML：

<div id="menu_content"> 
    <div id="menu_wallet"> 
     <div id="menu_mywallet"> 
      <div id="wallet_logo_new"> 
       <div id="wallet_logo_new_padding"> 
        <img src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" id="img_wallet_logo_new" /> 
       </div> 
      </div> 
      <div id="wallet_txt">Test</div> 
     </div> 
    </div> 
</div> 

CSS：

#menu_content { 
     height: 70%; 
     width: 100%; 
     position: relative; 
     border: 0px solid blue; 
    } 
    #menu_wallet { 
     overflow: hidden; 
     height: 35%; 
     width: 100%; 
     display:table; 
     background-color: #416DB4; 
     width: 85%; 
     margin-left: auto; 
     margin-right: auto; 
     border-radius: 0.3em; 

    } 

    #wallet_logo_new { 
     display: table-cell; 
     vertical-align: middle; 
     width: 50%; 

    } 
    #wallet_logo_new_padding { 
     position: relative; 
     height: 70%; 
     width: 70%; 
     margin: auto; 
     background-color: #1F58A5; 
     border-radius: 5px; 
     display: table; 
    } 
    #img_wallet_logo_new { 
     //margin-top:15px; 
     width: 20%; 
     //height: 20%; 
     //width: 60px; 
     //height: 60px;  
     position: relative; 

    } 
    #wallet_txt { 
     display: table-cell; 
     vertical-align: middle; 
     font-size: 3em; 
     color: #FFFFFF; 
     width: 50%; 
    } 

Answer 1

這是你想要的嗎？

#wallet_logo_new_padding img 
{ 
    position: relative; 
    width: 70%; 
    margin-left: 15%; 
    margin-right: 15%; 
}