Artigo original: How to Center Anything with CSS - Align a Div, Text, and More
Centralizar as coisas é um dos aspectos mais difíceis do CSS.
Os próprios métodos, geralmente, não são difíceis de entender. De fato, tem mais a ver com haver muitas formas diferentes de centralizar as coisas.
O método que você usa pode variar dependendo do elemento HTML que você está tentando centralizar ou se você está tentando centralizar na horizontal ou na vertical.
Neste tutorial, examinaremos como centralizar elementos diferentes na horizontal, na vertical, e tanto de uma forma como de outra.
Como centralizar na horizontal
Centralizar elementos na horizontal, geralmente, é mais fácil do que na vertical. Aqui estão alguns elementos comuns que você pode querer centralizar na horizontal e modos diferentes de fazer isso.
Como centralizar texto com a propriedade do CSS text-align center
Para centralizar texto ou links na horizontal, simplesmente use a propriedade text-align com o valor center:
<div class="container">
<p>Hello, (centered) World!</p>
</div>p {
text-align: center;
}
Como centralizar uma div com a propriedade do CSS margin auto
Use a versão reduzida da propriedade margin com o valor 0 auto para centralizar elementos do tipo block, como uma div, na horizontal:
<div class="container">
<div class="child"></div>
</div>.child {
...
margin: 0 auto;
}
Como centralizar uma div na horizontal com o Flexbox
O Flexbox é a forma mais moderna de centralizar as coisas em uma página. Ele torna criar layouts responsivos muito mais fácil do que costumava ser. Porém, ele não é suportado em navegadores antigos, como o Internet Explorer.
Para centralizar um elemento na horizontal com o Flexbox, simplesmente aplique display: flex e justify-content: center ao elemento pai:
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
justify-content: center;
}
Como centralizar na vertical
Centralizar elementos na vertical sem métodos modernos como o Flexbox pode ser uma tarefa de verdade. Aqui, vamos ver alguns dos métodos antigos de centralizar as coisas na vertical primeiramente. Depois, mostraremos como fazer isso com o Flexbox.
Como centralizar uma div na vertical como o posicionamento absoluto do CSS e com margens negativas
Por muito tempo, essa foi a maneira que sempre se usava para centralizar as coisas na vertical. Para este método, você deve conhecer a altura do elemento que você quer centralizar.
Primeiro, defina a propriedade position do elemento pai como relative.
Depois, no elemento filho, defina as propriedades position como absolute e top como 50%:
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Centralizar na vertical */
position: absolute;
top: 50%;
}
Isso, contudo, centralizou na vertical, de fato, apenas a extremidade superior do elemento filho.
Para centralizar o elemento filho de verdade, defina a propriedade margin-top como -(metade da altura do elemento filho):
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Centralizar na vertical */
position: absolute;
top: 50%;
margin-top: -25px; /* metade da altura desse elemento */
}
Como centralizar uma div na vertical com transform e translate
Se você não sabe a altura de um elemento que você quer centralizar (ou mesmo se você souber), este método é um bom truque.
Este método é muito semelhante ao das margens negativas acima. Defina a propriedade position do elemento pai como relative.
Para o elemento filho, defina a propriedade position como absolute e defina top como 50%. Agora, em vez de usar uma margem negativa para centralizar de verdade o elemento filho, simplesmente use transform: translate(0, -50%):
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Observe que translate(0, -50%) é a forma abreviada de translateX(0) e translateY(-50%). Você também poderia escrever transform: translateY(-50%) para centralizar o elemento filho na vertical.
Como centralizar uma div na vertical com Flexbox
Da mesma maneira que ele centraliza as coisas na horizontal, o Flexbox torna superfácil centralizar as coisas na vertical.
Para centralizar um elemento na vertical, aplique display: flex e align-items: center ao elemento pai:
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
align-items: center;
}
Como centralizar na vertical e na horizontal
Como centralizar uma div na vertical e na horizontal com o posicionamento absoluto do CSS e as margens negativas
Isso é bem parecido com o método acima para centralizar um elemento na vertical. Como da última vez, você deve conhecer a largura e a altura do elemento que você quer centralizar.
Defina a propriedade position do elemento pai como relative.
Então, defina a propriedade position do filho como absolute, top como 50% e left como 50%. Isso simplesmente centraliza o canto superior esquerdo do elemento filho na vertical e na horizontal.
Para centralizar de verdade o elemento filho, aplique uma margem superior negativa, definida como metade da altura do elemento filho, e uma margem esquerda negativa, definida como metade da largura do elemento filho:
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Centralizar na vertical e na horizontal */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* aplique margens superior e esquerda negativas para centralizar de verdade o elemento */
}
Como centralizar uma div na vertical e na horizontal com transform e translate
Use este método para centralizar um elemento na vertical e na horizontal se não souber suas dimensões exatas e se não puder usar o Flexbox.
Primeiro, defina a propriedade position do elemento pai como relative.
Em seguida, defina a propriedade position do elemento filho como absolute, top como 50% e left como 50%.
Por fim, use transform: translate(-50%, -50%) para centralizar de verdade o elemento filho:
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Como centralizar uma div na vertical e na horizontal com Flexbox
O Flexbox é a maneira mais fácil de centralizar um elemento na vertical e na horizontal.
Ele permite simplesmente uma combinação dos dois métodos de Flexbox anteriores. Em seguida, aplique justify-content: center e align-items: center para centralizar o(s) elemento(s) filho(s) na horizontal e na vertical:
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
justify-content: center;
align-items: center;
}
Isso é tudo o que você precisa saber para centralizar com as melhores alternativas. Agora, vá lá e centralize tudo o que quiser.