Estrutura HTML Base

Considere o seguinte código HTML para representar diferentes tipos de elementos:

<div class="container" style="margin: 10px;">
    <div class="inner">Bloco centralizado</div>
</div>
<div class="container" style="margin: 10px;">
    <span class="inner">Elemento inline centralizado</span>
</div>
<div class="container" style="margin: 10px;">
    <span class="inner" style="display: inline-block;">Elemento inline-block centralizado</span>
</div>

Métodos de Centralização

Categoria 1: Flexbox

A abordagem flexível utiliza as propriedades de alinhamento do Flexbox. Aplique ao elemento pai:

display: flex;
align-items: center;
justify-content: center;

Exemplo completo:

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inner {
        background-color: red;
        width: 150px;
        height: 150px;
    }
</style>

Categoria 2: Posicionamento com Position

Utilize posicionamento absoluto e relativo. Existem variações:

Variação 1: Com transformação

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }
    .inner {
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Variação 2: Com margem negativa

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }
    .inner {
        background-color: red;
        position: absolute;
        width: 150px;
        height: 150px;
        left: 50%;
        top: 50%;
        margin-left: -75px;
        margin-top: -75px;
    }
</style>

Variação 3: Com margin auto

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }
    .inner {
        background-color: red;
        position: absolute;
        width: 150px;
        height: 150px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
</style>

Categoira 3: Grid

O Grid Layout simplifica a centralização com place-items. No elemento pai:

display: grid;
place-items: center;

Exemplo:

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        display: grid;
        place-items: center;
    }
    .inner {
        background-color: red;
    }
</style>

Categoria 4: Table-Cell

Simule uma tabela usendo display: table-cell. Para elementos enline/inline-block, use text-align center no pai. Para blocos, use margin auto no filho.

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .inner {
        background-color: red;
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
</style>

Categoria 5: Para Elementos Inline (não incluindo inline-block)

Utilize text-align center no pai e defina line-height igual à altura do pai no elemento filho.

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        text-align: center;
    }
    .inner {
        background-color: red;
        width: 150px;
        height: 150px;
        line-height: 500px;
    }
</style>