Normalmente, quando não temos a medida exata do span
, podemos usar a seguinte técnica:
Primeiro, deixar a div
com position:relative
, para podermos deixar os span
em absolute
em relação à esta.
Depois, acertamos o canto superior esquerdo em 50% e 50%, ou seja, começando no meio.
Como queremos o centro do span
no centro da div
, e não o "bico" do span
no meio, compensamos usando um transform(-50%,-50%)
div {
position:relative;
width:100px;
height:100px;
/* o float e o border é só para visualizar */
float:left;
border:1px solid red
}
div span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
<div>
<span>T</span>
</div>
<div>
<span>E</span>
</div>
<div>
<span>X</span>
</div>
<div>
<span>T</span>
</div>
<div>
<span>O</span>
</div>
Se você definir o tamanho dos span
s, pode em vez de depender do transform
, usar margens negativas:
div { position:relative; width:100px; height:100px; float:left; border:1px solid red; }
div span {
position:absolute; display:block;
top:50%; left:50%; width:20px; height:20px;
margin:-10px 0 0 -10px; background-color:#f90;
}
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
Usando animações:
Caso vá animar alguma propriedade, lembre-se de colocar o translate sempre antes, senão o movimento pode ficar fora de centro.
Veja a diferença da ordem dos transform
s:
@keyframes rotate1 {
0% { transform:translate(-50%,-50%) rotate( 0 ) }
100% { transform:translate(-50%,-50%) rotate( 360deg ) }
}
@keyframes rotate2 {
0% { transform:rotate( 0 ) translate(-50%,-50%) }
100% { transform:rotate( 360deg ) translate(-50%,-50%) }
}
div { position:relative; width:100px; height:100px; float:left; border:1px solid red;}
div span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
#d1 span { animation:rotate1 2s infinite linear }
#d2 span { animation:rotate2 2s infinite linear }
<div id="d1"><span>Certo</span></div>
<div id="d2"><span>Argh!!!</span></div>