css 图片在div中居中

目的：为了让ID为navicatorbar的div中的图片实现居中

htm结构：

<div data-options="region:'north',border:false" style="height: 10%;">
    <div id="navicatorbar" style="height: 100%">
        <i></i> <img src="../img/ep-logo.png"
            style=" 12%; height: auto%; vertical-align: middle" />
    </div>
</div>

css样式:

#navicatorbar{
    background-image:url("../img/nav.jpg");
    background-size:100% 100%; 
     -moz-background-size:100% 100%;
     background-attachment: fixed;
     text-align:center;
}
i{
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
}

其中：text-align:center;为了作用居中；vertical-align:middle;为了上下居中