title: Align Logo at center of Header
body: <p>I'm trying to center align my <strong><code>Logo</code></strong> of my screen but not able to accomplish. Please help.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Header Start --&gt;
  &lt;div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false"&gt;
  &lt;div class="HeaderLft"&gt;&lt;a href="#dashboard" data-transition="slide" data-direction="reverse"&gt;&lt;img alt="" title="" src="images/top_lft_arrow.png"  /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="HeaderRgt"&gt;&lt;div class="TopRedBox"&gt;&lt;a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav&gt;Save&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="HeaderLogo"&gt;LOGO&lt;/div&gt;
  &lt;/div&gt;
   &lt;!-- Header Ends --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.HeaderLogo 
  {
      position: absolute;
      margin:0 auto;
      width: 100px;
      top:10px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/SaE9r.png" alt="enter image description here"></p>