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:
Eso es todo!