title: I'm having trouble vertical aligning text with line-height in a position:fixed; container
body: <p>I can't get this line-height to vertical center some text across mobile browsers and other weirdness.</p>
  
  <p>On Chrome and Firefox it works fine and is vertical center.</p>
  
  <p>For some reason in this fiddle the exact same code does not v align center in chrome.
  <a href="http://jsfiddle.net/SEOplay/D6LtM/" rel="nofollow noreferrer">http://jsfiddle.net/SEOplay/D6LtM/</a></p>
  
  <p>If I remove the <code>position:fixed; left:0; top:0;</code> from the <code>#headTitle</code> it works fine.</p>
  
  <p>On Android Mobile 4.0.4, user agent, mozilla/5.0 it works fine and is vertical center.</p>
  
  <p>On Android Tablet 4.1.2 same user agent it doesn't work and is off similar to the fiddle (they are all using the same stylesheet).</p>
  
  <p>So basically 
  Chrome: Yes.
  Firefox: Yes.
  Android Mobile 4.0.4: Yes.
  Android Tablet 4.1.2: No.
  Fiddle Chrome? No</p>
  
  <p>Here's the complete code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="headTitle"&gt;
      &lt;div id="headBtn"&gt;
          &lt;div id="hBtn"&gt;&lt;/div&gt;
      &lt;/div&gt;
       &lt;h1&gt;&lt;a href="&lt;?php echo get_option('home'); ?&gt;"&gt;L'ART Magazine&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    body {
      font-size: 10px;
      line-height:1;
      overflow:hidden;
      height:100%;
      width:100%;
      /* has to be scroll, not auto */
      -webkit-overflow-scrolling: touch;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
      div#hBtn {
          background:url('../images/icon_set.png') no-repeat -4px -53px;
          height:20px;
          width:20px;
          position:absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
          margin:auto;
      }
      div#headBtn {
          position:absolute;
          width:40px;
          height:40px;
          border-right:1px solid #999;
          cursor:hand;
          cursor:pointer;
      }
      div#headTitle {
          height:40px;
          width:100%;
          text-align:center;
          background-color:#222;
          position:fixed;
          left:0;
          top:0;
          border-bottom:1px solid #ddd;
          z-index:1000;
      }
      div#headTitle a {
          color:red;
          line-height:40px;
          font-size:20px;
      }
  </code></pre>
  
  <p>So what's up SO?</p>
  
  <p>Oh and here's an image too <img src="https://i.stack.imgur.com/LP9zZ.png" alt="http://i.imgur.com/EtwEKDl.png?1"></p>