Uma propriedade muito conhecida do CSS é a propriedade margin, ela serve para criar espaçamentos externos ao elemento onde ela é aplicada, mas existem algumas peculiariedades ao utilizarmos o seu valor como auto, e são elas que iremos explorar no artigo de hoje.

E antes de entrarmos em detalhes sobre o tal truque, vamos dar uma olhada em uma das técnicas mais comuns para se centralizar um elemento:

<style>
.centered {
	display: block;
	margin: 0 auto;
}
</style>

<div class="centered"></div>

Se nós observarmos o resultado final na tela, obviamente não iremos ver nada já que a div não possui conteúdo algum, então vamos adicionar um background nos estilos e algum conteúdo, assim ela vai aparecer na tela

<style>
/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { background: #eee; }

.centered {
    display: block;
    margin: 0 auto;
    background: #f00;
}
</style>

<div class="centered">...</div>

E o resultado será esse:

Perceba que como elementos com display block ocupam todo o espaço disponível por padrão não conseguimos ver o efeito de centralizar logo de cara, então vamos limitar a largura da .centered para termos o efeito final.

.centered {
    display: block;
	  max-width: 50rem;
    margin: 0 auto;
    background: #f00;
}

E finalmente a nossa div está centralizada:

Como essa técnica funciona?

Essa técnica funciona graças a duas coisas, o display: block e ao margin: 0 auto, o primeiro aloca todo o espaço disponível na horizontal, e o segundo como ele sabe que não tem como ter nenhum outro elemento ali, divide as margens igualmente para cada lado, dessa forma o elemento fica com o mesmo valor de margem em ambas as laterais e isso resulta nele sendo centralizado.

Outras aplicações

Esse comportamento especial do valor auto na propriedade margin nos trás aplicações interessantes para ele, como por exemplo alinhar a div a esquerda ou a direita ao invés de centraliza-la. Podemos fazer isso sabendo que cada auto vai pegar o máximo possível de espaço, logo se quisermos alinhar a div a esquerda, podemos fazer assim:

<style>
/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { background: #eee; }

.box {
    display: block;
    max-width: 10rem;
    margin: 0;
    margin-right: auto;
    background: #f00;
}
</style>

<div class="box">...</div>

Como o margin-right é auto e o resto é 0, ele concentra todas o espaço no margin-right, e isso empurra a nossa div até a esquerda. Se utilizassemos o margin-left, ao invés do margin-right, então ela teria ido para a direita.

Deixando as coisas mais interessantes com flexbox

Podemos aplicar esse truque com flexbox também, mas não no elemento container como estivemos fazendo com a div até agora, nós vamos aplicar esse truque nos filhos de um container flex, como uma alternativa a propriedade align-self.

No flexbox, a propriedade align-self consegue alterar o alinhamento de uma flex-child (qualquer elemento filho de um container flex), por exemplo o nosso exemplo anterior ficaria assim:

<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        background: #eee;
    }

    .parent {
        display: flex;
        flex-direction: column;
    }

    .child {
        background: #f00;
        width: 10rem;
        align-self: flex-end;
    }
</style>

<div class="parent">
    <div class="child">...</div>
</div>

Utilizamos o flex-direction para mudar o eixo primário para a vertical, e assim fazer o align-self aplicar o seu efeito na horizontal (já que ele atua no eixo secundário). O que nos deixa limitados a utilizar o align-self apenas a um eixo por vez, porém se utilizarmos a propriedade margin, podemos fazer com que nós possa ser possível alinhar em ambos os eixos.

Vamos recriar o exemplo usando margin-left: auto ao invés do align-self: flex-end:

Tente fazer alterações nos valores das propriedades margin-* de 0 para auto, e veja como é possível realinhar esse elemento de formas diferentes, por exemplo no canto inferior direito (top e left como auto), ou centralizado verticalmente e horizontalmente (todos como auto), etc…

Obrigado a você que leu até aqui, deixe aqui nos comentários se já conhecia a técnica e se achou ela interessante, e nos vemos no próximo artigo.