Align Logo at center of Header

Align Logo at center of Header

I'm trying to center align Logo of my screen but not able to accomplish.
Please help.
HTML:
<!-- Header Start -->
<div class="MastHead" data-role="header" data-position="fixed"
data-tap-toggle="false">
<div class="HeaderLft"><a href="#dashboard" data-transition="slide"
data-direction="reverse"><img alt="" title=""
src="images/top_lft_arrow.png" /></a></div>
<div class="HeaderRgt"><div class="TopRedBox"><a href="#" data-rel="back"
data-transition="slide" data-direction="reverse"
id=saveFav>Save</a></div></div>
<div class="HeaderLogo">LOGO</div>
</div>
<!-- Header Ends -->
CSS:
.HeaderLogo { position: absolute; margin:0 auto; width: 100px; top:10px; }