title: CSS centering stuff
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: url('background.jpg')
  }
  header {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100px;
    margin: auto;
    text-align: center;
  }
  h2 {
    position: relative;
    font-size: 44px;
    color: white;
    bottom: 15%;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    word-spacing: 4px;
  }
  p {
    text-align: center;
    color: black;
    font-size: 22px;
    font-family: 'Roboto Mono', ;
    border: 6px solid black;
    padding: 12px;
    width: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;hhchh&lt;/title&gt;
    &lt;script type="text/javascript" src="N:\Desktop\Javascript\JS.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="N:\Desktop\Javascript\appStyle.css"&gt;
    &lt;link href='http://fonts.googleapis.com/css?family=Orbitron:500' rel='stylesheet' type='text/css'&gt;
    &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Mono:300' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;h2&gt;text and stuff&lt;/h2&gt;
      &lt;p&gt;button text&lt;/p&gt;
    &lt;/header&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to center something and it's not working. </p>
  
  <p><a href="http://i.imgur.com/j9r7e9f.png" rel="nofollow">What I want</a></p>
  
  <p><a href="http://i.imgur.com/8YwLo1N.jpg" rel="nofollow">This is what I've been able to do so far</a> but the button width is 100%, I want it to be like 100px</p>
  
  <p><strong>Things that I tried -</strong></p>
  
  <p>1)</p>
  
  <pre><code>position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  </code></pre>
  
  <p>2) Make it like a table, If I have to do it like this, then I think I'm better off with bootstrap.</p>
  
  <p>3) Using position relative and making it look like center.</p>
  
  <p>4)  </p>
  
  <pre><code>    position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  </code></pre>