title: Making a CSS button: positioning the text
body: <p>I'm trying to make a rudimentary css button.</p>
  
  <p>I'm encountering errors while trying to position the text vertically and horizontally centered within the button. I have this following html.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
      #button
      {
        background:lightblue;
        border-radius: 30px;
        width: 15em;
        height: 3em;
        position:relative;
      }
      h1 {
        vertical-align: center;
        text-align: center;
      }
      &lt;/style&gt;
      &lt;title&gt;Making a button...&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="button"&gt;&lt;h1&gt;Click Me&lt;/h1&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>jsfiddle for this question: <a href="http://jsfiddle.net/CRpvr/" rel="nofollow">http://jsfiddle.net/CRpvr/</a></p>
  
  <p>I was told there was a workaround using <code>line-height: 100%</code>, but if I need more than one line, this doesnt work very well. What is the most idiomatic and proper way to accomplish this?</p>