How to perfectly center a "plus" sign in a circle using CSS

Question

How can I use CSS to center a plus sign horizontally and vertically within a circle? Here's my 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;
}

<span id="container">+</span>

Here's a jsfiddle:

http://jsfiddle.net/flyingL123/on44a0xq/

When I view this is Chrome 46.0.2490.86 (64-bit) 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:

I thought this was going to be straight forward, but it's driving me nuts. Any idea how to align the plus sign vertically?

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.

Answer 1

This is the proper solution of a perfectionist.

Btw. here is fiddle with improved looks: https://jsfiddle.net/mzvarik/wt3upz4q/

Basics:

.circle{
  border:1px solid #000;
  width:20px;
  height:20px;
  border-radius:100%;
  position:relative;
  margin:4px;
  display:inline-block;
  vertical-align:middle;
}
.circle.plus:before,
.circle.plus:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:green;
}
.circle.plus:before{
    width: 2px;
    margin: 2px auto;
}
.circle.plus:after{
    margin: auto 2px;
    height: 2px;
}

/* and a bonus!!! minus :-) */
.circle.minus:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:red;
    margin: auto 2px;
    height: 2px;
}

<h3>Perfect circle in a perfect world!</h3>

<span class="circle plus"></span> Plus

<span class="circle minus"></span> Minus

Answer 2

The normal + character aligns the same way as any non-capital letter would do, i.e. a bit lower from the middle-line. You can see the difference when using e.g. 'a' vs 'A'. So using a "full width plus" character (U+FF0B) instead of the normal one solves the vertical alignment. I also use flexbox to easily align the character center-center.

#wrap {
  display: flex;
  align-items: center;
  margin: 10px;
}
.icon:before {
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid black;
  font-size: 30px;
  color: black;
}
#a:before {
  content: 'a';
}
#A:before {
  content: 'A';
}
#plus:before {
  content: '+';
}
#bigplus:before {
  content: '\FF0B';
}

<div id="wrap">
  <div class="icon" id="a"></div>
  <div class="icon" id="A"></div>
  <div class="icon" id="plus"></div>
  <div class="icon" id="bigplus"></div>
</div>