Como centralizar qualquer coisa com CSS - alinhar um div, texto e muito mais

Centralizar as coisas é um dos aspectos mais difíceis do CSS.

Os métodos em si geralmente não são difíceis de entender. Em vez disso, é mais devido ao fato de que existem tantas maneiras 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á centralizando horizontal ou verticalmente.

Neste tutorial, veremos como centralizar diferentes elementos horizontalmente, verticalmente e verticalmente e horizontalmente.

Como centralizar horizontalmente

Centralizar elementos horizontalmente é geralmente mais fácil do que centralizá-los verticalmente. Aqui estão alguns elementos comuns que você pode querer centralizar horizontalmente e diferentes maneiras de fazer isso.

Como centralizar texto com a propriedade CSS Text-Align Center

Para centralizar texto ou links horizontalmente, basta usar a text-alignpropriedade com o valor center:

Hello, (centered) World!

p { text-align: center; }

Como centralizar uma div com CSS Margin Auto

Use a marginpropriedade abreviada com o valor 0 autopara centralizar elementos de nível de bloco como um divhorizontalmente:

.child { ... margin: 0 auto; }

Como centralizar uma div horizontalmente com o Flexbox

O Flexbox é a maneira mais moderna de centralizar as coisas na página e torna o design de layouts responsivos muito mais fácil do que costumava ser. No entanto, não é totalmente compatível com alguns navegadores legados como o Internet Explorer.

Para centralizar um elemento horizontalmente com Flexbox, basta aplicar display: flexe justify-content: centerao elemento pai:

.container { ... display: flex; justify-content: center; }

Como centralizar verticalmente

Centralizar elementos verticalmente sem métodos modernos como o Flexbox pode ser uma tarefa real. Aqui, examinaremos alguns dos métodos mais antigos para centralizar as coisas verticalmente primeiro e, em seguida, mostraremos como fazer isso com o Flexbox.

Como centralizar uma div verticalmente com posicionamento absoluto de CSS e margens negativas

Por muito tempo, essa foi a melhor maneira de centralizar as coisas verticalmente. Para este método, você deve saber a altura do elemento que deseja centralizar.

Primeiro, defina a displaypropriedade do elemento pai como relative.

Em seguida, para o elemento filho, defina a displaypropriedade como absolutee toppara 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

Mas isso realmente centraliza verticalmente a borda superior do elemento filho.

Para realmente centralizar o elemento filho, defina a margin-toppropriedade como -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Como centralizar um div verticalmente com transformar e traduzir

Se você não souber a altura do elemento que deseja centralizar (ou mesmo se souber), esse método é um truque bacana.

Este método é muito semelhante ao método das margens negativas acima. Defina a displaypropriedade do elemento pai como relative.

Para o elemento filho, defina a displaypropriedade como absolutee topcomo 50%. Agora, em vez de usar uma margem negativa para realmente centralizar o elemento filho, basta usar transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

Observe que translate(0, -50%)é uma abreviação de translateX(0)e translateY(-50%). Você também pode escrever transform: translateY(-50%)para centralizar o elemento filho verticalmente.

Como centralizar uma div verticalmente com o Flexbox

Assim como centralizar as coisas horizontalmente, o Flexbox torna muito fácil centralizar as coisas verticalmente.

Para centralizar um elemento verticalmente, aplique display: flexe align-items: centerao elemento pai:

.container { ... display: flex; align-items: center; }

Como centralizar tanto vertical quanto horizontalmente

Como centralizar uma div vertical e horizontalmente com posicionamento absoluto de CSS e margens negativas

Isso é muito semelhante ao método acima para centralizar um elemento verticalmente. Como da última vez, você deve saber a largura e a altura do elemento que deseja centralizar.

Defina a displaypropriedade do elemento pai como relative.

Em seguida, defina a displaypropriedade da criança como absolute, toppara 50%e leftpara 50%. Isso apenas centraliza o canto superior esquerdo do elemento filho verticalmente e horizontalmente.

Para realmente centralizar 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:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

Como centralizar uma div vertical e horizontalmente com transformar e traduzir

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

Isso é tudo que você precisa saber para centrar-se com o melhor deles. Agora vá em frente e centre todas as coisas.