Centrar texto verticalmente con propiedad line-height de CSS

Alguna ves te has preguntado: ¿Comó centrar verticalmente un texto dentro de un div? Bueno la propiedad CSS line-height nos ayuda a lograr este centrado verticalmente, a continuación un ejemplo:

CSS Resultado
Sin line-height:

   .boton-yellow{
      color: #fff;
      width: 80px;
      height: 30px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      background: #ffb515;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
      cursor: pointer;
    }
boton sin line-height
Con line-height:

   .boton-yellow{
      color: #fff;
      width: 80px;
      height: 30px;
 line-height: 30px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      background: #ffb515;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
      cursor: pointer;
    }
boton con line-height

Para obtener el centrado correcto tenemos que tener en cuenta nuestro height de nuestro elemento (div), para nuestro ejemplo podemos ver que nuestro height tiene 30px por lo tanto nuestro line-height también será de 30px, esto logra el efecto deseado.

height: 30px;
line-height: 30px;

De esta manera como podemos ver el texto queda centrado verticalmente utilizando esta propiedad de CSS, por lo tanto nos ahorramos estar trabajando con los padding y el height para lograr el efecto deseado.

Puede descargar este ejemplo en el siguiente enlace: line-height.zip