Best technique to style badge

Question

How you would style counter badge for example facebook notification? the value is not necessary one digit. It can be one or two. Also in my attempt I don't see how I can center the value.

#counter {
  display: block;
  width: 18px;
  height: 18px;
  padding: 2px;
  position: absolute;
  font-size: 12px;
  left: 0;
  top: 10px;
  background: red;
  border-radius: 3px;
  text-align: center;
  color: #fff;
}

<span id="counter">12</span>

Try to change the value to 1 digit, it doesn't look center again. It's slightly off.

Answer 1

#counter {
  display: block;
  padding: 2px 4px;
  position: absolute;
  font-size: 12px;
  left: 0;
  top: 10px;
  background: red;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height:18px;
}

<span id="counter">111</span>

Answer 2

#counter {
  display: block;
  width: 18px;
  height: 18px;
  padding: 2px;
  position: absolute;
  font-size: 12px;
  left: 0;
  top: 10px;
  background: red;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height:18px;
}

<span id="counter">1</span>