margem:auto; Não funciona em elementos de bloco embutido

Em CSS, margin:auto; é comumente usado para centralizar horizontalmente elementos de bloco em uma página. No entanto, quando aplicada a elementos de bloco embutido, esta propriedade se torna ineficaz.

Os elementos de bloco embutido fluem para a página inline como elementos embutidos, mas podem ter largura e altura específicas. Esse comportamento cria dificuldades ao tentar centralizá-los horizontalmente usando margin:auto;.

Old Code:

#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Neste código, o elemento #container tem uma largura específica e aciona o comportamento de centralização esperado.

Novo código:

#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}

Alterar a propriedade display do #container para inline-block altera a forma como ele interage com as margens. Elementos de bloco embutido não se comportam como elementos de bloco e perdem a capacidade de serem centralizados usando margin:auto;.

Solução:

Para centralizar um elemento de bloco embutido horizontalmente, use a propriedade text-align: center em seu elemento que o contém:

.center {
    text-align: center;
}

Isso alinhará o elemento do bloco embutido ao centro do elemento do bloco que o contém.