css - 流体 - 相对于其包装器水平和垂直对齐的图像

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