如何使用 CSS 将“加号”完美居中

Question

如何使用 CSS 将加号在圆圈内水平和垂直居中？这是我的代码：

 #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>

这是一个 jsfiddle：

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

当我在 Mac 上查看它是 Chrome 46.0.2490.86 (64-bit) 时，加号看起来没有垂直对齐。它比顶部更接近圆的底部。这是我在小提琴中看到的屏幕截图：

我以为这会很简单，但这让我抓狂。知道如何垂直对齐加号吗？

请注意 Bootstrap css 包含在小提琴中，因为我在我的项目中使用它。如果我从小提琴中删除 Bootstrap，加号似乎更接近垂直居中。

原文由 flyingL123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我最终选择了这个：

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

使用以下 CSS：

 .container {
    display: block;
    border: 2px solid white;
    border-radius: 50%;
    height: 20px;
    width: 20px;
}

.container span {
    position: absolute;
    top: -7px;
    left: 2px;
}

原文由 flyingL123 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这才是完美主义者的妥妥解决办法。

顺便提一句。这是 改进外观的小提琴： https ://jsfiddle.net/mzvarik/wt3upz4q/

基本：

 .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

原文由 Martin Zvarík 发布，翻译遵循 CC BY-SA 4.0 许可协议