Vertically centering a plus sign inside of a circle

Question

I am trying to vertically and horizontally center the plus sign inside of the circle. I've tried using line-height, but that does not seem to work:

CODE

.circle {
  font-size: 3.27rem;
  font-weight: 400;
  width: 94px;
  border-radius: 50%;
  color: white;
  line-height: 94px;
  text-align: center;
  padding: 0;
  height: 94px;
  margin: 0 auto;
  box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
  cursor: pointer;
  background: #fcce00;
  position: absolute;
  right: 50px;
  z-index: 10;
  span {
    line-height: 94px;
  }
}

<div class="circle">
  <span>+</span>
</div>

Answer 1

Although you code seems to work as you desire (tested in FF), you need to take your span out of .circle in your CSS, because this is not a pre-processor CSS, therefore not valid CSS.

Snippet:

.circle {
  font-size: 3.27rem;
  font-weight: 400;
  width: 94px;
  border-radius: 50%;
  color: white;
  line-height: 94px;
  text-align: center;
  padding: 0;
  height: 94px;
  margin: 0 auto;
  box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
  cursor: pointer;
  background: #fcce00;
  position: absolute;
  right: 50px;
  z-index: 10;
}
span {
  line-height: 94px;
}

<div class="circle">
  <span>+</span>
</div>