Centralizar div com largura variável

Centralizar qualquer elemento html parece simples. Basta você colocar um “text-align: center” via CSS e parece que tudo estará bem! Errado!

A propriedade text-align, como o próprio nome já diz, é para alinhamentos de textos. Apesar de que, em alguns casos, você consegue alinhar outros objetos.

Para este propósito usamos então a propriedade “margin” com seu valor “auto”, assim, certamente o elemento ficará centralizado, mas desde que você tenha definido uma largura para ele. Não entendeu? 

Go to the code! 🙂

    
        .element {
            width: 200px;
            margin: 0 auto;
        }
    

Então, em teoria, este elemento ficará centralizado dentro do bloco onde estiver. Mas, se a largura deste elemento for variável, o mesmo não irá centralizar. Então o que fazer? Simples, usaremos da propriedade “display: table”.

    
        .element { 
            display: table; 
            margin: 0 auto; 
        }
    

Isso irá te ajudar bastante, mas lembre-se de realizar testes nos diversos navegadores e suas versões para não comprometer o seu projeto. Grande abraço.