title: How to center an HTML element with border that matches width
body: <p>Tricky one, I have an HTML title, with border-top and border-bottom applied on it. 
  Can I center it so that the borders are the same width as the element ? 
  Now I have to miserably use width, which is not at all a good solution. </p>
  
  <p>See here for a demo : <a href="http://codepen.io/anon/pen/KIJAh" rel="nofollow">http://codepen.io/anon/pen/KIJAh</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;h3 class="removeMe"&gt;All your base&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div {
   padding-top: 30px;
   height: 100px;
   width: 300px;
   margin: 0 auto;  
   background-color: Moccasin;
  }
  
  h3 {
    text-align: center;
    display: block;
    border-top: 1px solid black;
    border-bottom: 1px solid black; 
    margin: 0 auto;
  }
  
  .removeMe {
   width:160px;
  }
  </code></pre>