Existem pelo menos 2 maneiras bem simples de alinhar elementos na horizontal, que é margin:auto e text-align:center adicionado ao elemento parent. Porém mesmo na horizontal em alguns casos isso não é o suficente. E na vertical margin:auto superior e inferior mesmo dentro de um elemento com posição relativa e altura fixa, só vai alinhar se o elemento parent seja display:flex.
<div style="margin: 0 auto">Elemento alinhado na horizontal</div>
<div style="text-align: center;">
<div style="text-align: left">Elemento alinhado na horizontal</div>
</div>
<div style="display: flex;">
<div style="margin: auto 0">Elemento alinhado na vertical</div>
</div>
<div style="display: flex;">
<div style="margin: auto auto">Elemento alinhado na vertical e horizontal</div>
</div>
Quando os exemplos mais simples acima não funcionarem, ou para não arriscar que alguma coisa mude no código interferindo no alinhamento dos elementos, existem outras maneira de "forçar" que esses elementos se alinhem, e aqui eu apresento 3 alternativas.
flex_: as declarações precisam estar no elemento parent do elemento a ser alinhado.
align_: as declarações precisam estar em um elemento filho de um elemento parent com posição relativa.
centre_: é recomendado que o mesmo seja filho de um elemento parent com posição relativa. Este está declarado com posição relativa, porém funciona se for absoluta.
Alinhamento horizontal
flex_x
<div class="flex_x">
<div>Comportamento do texto</div>
</div>
.flex_x {
display: flex;
justify-content: center;
}
align_x
<div><!-- position: relative -->
<div class="align_x">Comportamento do texto</div>
</div>
.align_x {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
centre_x
<div>
<div class="centre_x">Comportamento do texto</div>
</div>
.centre_x {
position: relative;
left: 50%;
transform: translateX(-50%);
}
Vertical
flex_y
<div class="flex_y">
<div>Comportamento do texto</div>
</div>
.flex_y {
display: flex;
align-items: center;
}
align_y
<div><!-- position: relative -->
<div class="align_y">Comportamento do texto</div>
</div>
.align_y {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
centre_y
<div>
<div class="centre_y">Comportamento do texto</div>
</div>
.centre_y {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Horizontal e Vertical
flex_xy
<div class="flex_xy">
<div>Comportamento do texto</div>
</div>
.flex_xy {
display: flex;
align-items: center; /* alinha na vertical */
justify-content: center; /* alinha na horizontal */
}
align_xy
<div><!-- position: relative -->
<div class="align_xy">Comportamento do texto</div>
</div>
.align_xy {
position: absolute;
inset: 0;
margin: auto;
}
centre_xy
<div>
<div class="centre_xy">Comportamento do texto</div>
</div>
.centre_xy {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* -------------------------------------------------
horizontal
*/
.flex_x {
display: flex;
justify-content: center;
}
.align_x {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.centre_x {
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* -------------------------------------------------
vertical
*/
.flex_y {
display: flex;
align-items: center;
}
.align_y {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
.centre_y {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* -------------------------------------------------
horizontal e vertical
*/
.flex_xy {
display: flex;
align-items: center; /* alinha na vertical */
justify-content: center; /* alinha na horizontal */
}
.align_xy {
position: absolute;
inset: 0;
margin: auto;
}
.centre_xy {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}