Uma alternativa é trabalhar com flexbox. E por um motivo simples: Você não precisa se preocupar com a questão do posicionamento vertical e horizontal, a propriedade faz todo o trabalho com base nas regras definidas.
Um exemplo:
.size-x {
height: 100px;
width:100px;
}
.circle {
background: #333;
color: #fff;
border-radius: 50%;
font-size: 2em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
<div class='size-x circle'>1</div>
A princípio pode parecer muito código para uma coisa tão simples, acontece que trata-se ainda de uma propriedade "experimental", então é preciso utilizar alguns prefixos.
Mas para mostrar a questão do "não se preocupar com o alinhamento (...) o flexbox cuida disso" eis alguns exemplos aumentando somente o width
e height
da mesma classe utilizada no exemplo acima:
.circle {
background: #333;
color: #fff;
border-radius: 50%;
font-size: 2em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
.size-u {
background: #1abc9c;
height: 50px;
width: 50px;
}
.size-v {
background: #3498db;
height: 100px;
width: 100px;
}
.size-w {
background: #9b59b6;
height: 150px;
width: 150px;
}
.size-x {
background: #e74c3c;
height: 200px;
width: 200px;
}
.size-y {
background: #f1c40f;
height: 300px;
width: 300px;
}
.size-z {
background: #34495e;
height: 500px;
width: 500px;
}
<div class='size-u circle'>1</div>
<div class='size-v circle'>2</div>
<div class='size-w circle'>3</div>
<div class='size-x circle'>4</div>
<div class='size-y circle'>5</div>
<div class='size-z circle'>6</div>