title: Align text vertically in jQuery mobile
body: <p>How can I vertically &amp; horizontally align a text in the main content of a jQuery webpage?
  I want to align "REZA SAN STUDIOS" to be in the middle of the page with vertical align middle as well. </p>
  
  <p>I've tried to use position: absolute and relative and align them to left, top 50% but different mobile browser will not display them in the middle. Some more towards the left and some more to the right.</p>
  
  <p>Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- MAINPAGE --&gt;
  &lt;div data-role="page" data-theme="d"&gt;
    &lt;div data-role="header" id="headerpageone"&gt;
      &lt;a href="#myPanel" class="ui-btn ui-btn-inline"&gt;&lt;h1&gt;☰&lt;/h1&gt;&lt;/a&gt;
      &lt;img src="http://placehold.it/30x30"&gt;
    &lt;/div&gt;
    &lt;div data-role="content" data-theme="d" id="contentone"&gt;
      &lt;h1&gt;REZA SAN STUDIOS&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div data-role="footer" id="footerpageone" data-position="fixed"&gt;
      &lt;a href="#intro" class="ui-btn ui-btn-inline" data-transition="slideup" &gt;&lt;img src="http://placehold.it/30x30"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    font-family:'CoreHumanistSans';
    font-weight:500;
    letter-spacing:0.05em;
    font-size:14px;   
  }
  #headerpageone {
    text-align:center;
    padding-top:10px;
  }
  #contentone {
    text-align: center;
    vertical-align: middle;
  }
  #footerpageone {
      text-align:center;
  }
  .copy {
    padding-top:20px;
  }
  </code></pre>
  
  <p>JSFiddle:
  <a href="http://jsfiddle.net/LRyz8/" rel="nofollow">http://jsfiddle.net/LRyz8/</a></p>