Desde quando comecei a programar vejo em fóruns, artigos, ou qualquer outro tipo de lugar onde se possa tirar dúvidas, as pessoas perguntando: como centralizar div? Essa pergunta também serve para qualquer outro elemento CSS. E vejo essa dúvida até hoje nos tópicos recentes, talvez isso aconteça devido ao fato de sempre existirem pessoas entrando no mundo da programação e ser um recurso muito utilizado em sites e plataformas Web.
Nesse artigo pretendo explicar e dar exemplos de algumas maneiras de como centralizar um <div>, ou qualquer outro elemento HTML, seja na horizontal, na vertical ou em ambos.
Centralizando na horizontal
Para elementos do tipo inline como <a>, <img>, <span>, <input>, <label>, entre outros, você pode apenas definir seu elemento de container com a propriedade text-align: center, exemplo:
HTML de exemplo:
<div class="container">
<span>Lorem ipsum</span>
</div>CSS de exemplo:
.container {
text-align: center;
}
Para elementos do tipo block como <div>, <h1>, <ul>, <li>, <p>, entre outros, você pode fazer de várias maneiras. A que eu mais vejo por aí é utilizando margin-left e margin-right com o valor auto, exemplo:
HTML de exemplo:
<div class="container">
Lorem ipsum
</div>CSS de exemplo:
.container {
width: 200px;
margin-left: auto;
margin-right: auto;
}
Para centralizar um elemento do tipo block você deve definir uma largura para ele, caso contrário, ele irá ocupar 100% do tamanho do seu elemento pai, impossibilitando de centraliza-lo.
Outra forma de centralizar um elemento block, é utilizar a propriedade display com o valor flex, essa propriedade deve ser aplicada no elemento pai do elemento que deseja centralizar, exemplo:
HTML de exemplo:
<div class="element-parent">
<div class="element-child">Lorem ipsum</div>
</div>CSS de exemplo:
.element-parent {
display: flex;
justify-content: center;
}
A propriedade justify-content irá definir o espaço entre os elementos conforme o eixo definido para o elemento pai, como não definimos, o padrão é o eixo row, que significa linha, aplicando o valor center, os elementos filhos irão se posicionar em direção ao centro do elemento pai, dando o efeito de centralização.
Centralizando na vertical
Centralizar na vertical é um pouco mais complicado, mas assim como na horizontal existem diversas maneiras de conseguir o mesmo efeito, uma delas é atribuir ao elemento pai a propriedade display: table-cell, com isso, o elemento pai vai se comportar como uma célula de uma tabela, bastando definir para o aliamento do conteúdo ser middle (meio), conforme exemplo:
HTML de exemplo:
<div class="element-parent">
<div class="element-child">Lorem ipsum</div>
</div>CSS de exemplo:
.element-parent {
height: 500px;
display: table-cell;
vertical-align: middle;
}
Outra forma é utilizando position: absolute, elementos com position absolute se posicionam referente ao primeiro elemento pai não static, se quiserem saber mais sobre position CSS já escrevi um artigo sobre isso, só conferir no link Position CSS. Sabendo disso, você pode posicionar o elemento aonde desejar, para isso, você deve definir coordenadas para o elemento filho, como top, right, bottom, left, depois você deve "puxar" a metade do tamanho do elemento em direção oposta do posicionamento, conforme exemplo:
HTML de exemplo:
<div class="element-parent">
<div class="element-child">Lorem ipsum</div>
</div>CSS de exemplo:
.element-parent {
height: 500px;
position: relative;
}
.element-child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Centralizando na horizontal e vertical
Agora vem a dúvida da maioria das pessoas que estão iniciando na programação Web, como centralizar div na horizontal e vertical? Basicamente é muito parecido com o posicionamento vertical, mudando somente um pequeno trecho para deixar na horizontal também. Podemos utilizar a mesma técnica de posicionamento com o position absolute, a única diferença é que vamos deslocar o elemento para esquerda ou direita e "puxar" a metade do tamanho dele para o lado oposto, conforme exemplo:
HTML de exemplo:
<div class="element-parent">
<div class="element-child">Lorem ipsum</div>
</div>CSS de exemplo:
.element-parent {
height: 500px;
position: relative;
}
.element-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Outra forma é utilizar o display flex definindo o elemento pai com o atributo align-items: center, isso fará com que os elementos filhos se posicionem no centro do eixo vertical, exemplo:
HTML de exemplo:
<div class="container">
<div>Lorem ipsum</ddiv>
</div>CSS de exemplo:
.container {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Conclusão
Essas são algumas técnicas para centralizar div ou outro elemento utilizando CSS, entendendo bem essas técnicas, fica fácil centralizar qualquer elemento em qualquer lugar da página.
