title: How to perfectly center a "plus" sign in a circle using CSS
body: <p>How can I use CSS to center a plus sign horizontally and vertically within a circle?  Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    font-size: 20px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid black;
    line-height: 16px;
    text-align: center;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="container"&gt;+&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/flyingL123/on44a0xq/" rel="noreferrer">http://jsfiddle.net/flyingL123/on44a0xq/</a></p>
  
  <p>When I view this is <code>Chrome 46.0.2490.86 (64-bit)</code> on a Mac, the plus sign does not look vertically aligned. It's much closer to the bottom of the circle than the top.  Here's a screenshot of what I see in the fiddle:</p>
  
  <p><a href="https://i.stack.imgur.com/zjJj0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zjJj0.png" alt="enter image description here"></a></p>
  
  <p>I thought this was going to be straight forward, but it's driving me nuts. Any idea how to align the plus sign vertically?</p>
  
  <p>Please note Bootstrap css is included in the fiddle because I'm using it in my project. If I remove Bootstrap from the fiddle, it seems like the plus sign moves closer to vertically centered.</p>