<

Para centrar una sola línea de texto verticalmente dentro de un div con un alto establecido:



HTML:

<div class="btn">
    Boton 1
</div>


CSS:

.btn {
    color: white;
    background-color: blue;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}


O sea, se setea el alto de la línea al mismo alto del div.

Resultado:

Boton 1




Para centrar cualquier cosa que pongamos dentro de un div
y que el mismo se ajuste al tamaño de su contenedor:



HTML:

<div class="padre">
    <div class="hijo">
        Todo lo que pongas acá se va a centrar
    </div>
</div>


CSS:

.padre {
    display: table;
    width: 100%;
    height: 100%;
} .hijo {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}


El div padre va a ocupar el 100% de su contenedor (por ejemplo puede ser el section)
y todo lo que vaya en el div hijo se va a centrar verticalmente.
El centrado horizontal funciona solo con los inline-block.

Ejemplo para 4 botones inline-block con los divs padre/hijo dentro de un section de 380x320:

HTML:

<section>
    <div class="padre">
        <div class="hijo">
            <div class="btn"> btn1 </div>
            <div class="btn"> btn2 </div>
            <div class="btn"> btn3 </div>
            <div class="btn"> btn4 </div>
        </div>
    </div>
</section>


CSS:

section {
     background-color: gray;
     width: 320px;
     height: 380px;
}

.btn {
     margin: 3px;
     display: inline-block;
     color: white;
     background-color: blue;
     width: 100px;
     height: 50px;
     text-align: center;
     line-height: 50px;
}

.padre {
     display: table;
     width: 100%;
     height: 100%;
}

.hijo {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
}


Resultado:

btn1
btn2
btn3
btn4



Eso es todo!