SUPERCAT.DEV

Metodo Table

Metodo completamente sorpassato, poco pratico e poca manutenibilità.

<h2 class="title">Table</h2>
<div class="table">
    <p>Centrami!</p>
</div>

.table {
    display: table;
}

.table p {
    display: table-cell;
    vertical-align: middle;
}

Metodo Absolute

<h2 class="title">Absolute</h2>
<div class="absolute">
    <p>Centrami!</p>
</div>

.absolute {
    position: relative;
}

.absolute p {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.absolute {
	position: relative;
}

.absolute p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Variante con inset

.absolute {
    position: relative;
}

.absolute p {
    position: absolute;
    inset: 0;
    margin: auto;
}

Metodo Flexbox

<h2 class="title">Flexbox</h2>
<div class="flexbox">
    <p>Centrami!</p>
</div>

.flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

Metodo Grid

<h2 class="title">Grid</h2>
<div class="grid">
    <p>Centrami!</p>
</div>

.grid {
    display: grid;
    align-items: center;
    justify-content: center;
}

Oppure

.grid {
    display: grid;
    place-items: center;
}

Metodo Margin

<h2 class="title">Margin</h2>
<div class="margins">
    <p>Centrami!</p>
</div>

.margins {
    display: grid;
}

.margins p {
    margin: auto;
}

Oppure con Flex

.margins {
    display: flex;
}

.margins p {
    margin: auto;
}

Altri metodi

Metodo line-height

Metodo con bassa manutenibilità e poco pratico.

<div class="lineheight">
    <p>Centrami!</p>
</div>

.lineheight {
    width: 600px;
    height: 400px;
    background: lightgray;
}

.lineheight p {
    text-align: center;
    line-height: 400px;
    margin: 0;
}

Problema quando il testo nel paragrafo esce dalla dimensione del box perché prende una nuova linea alta come il box, per cui completamente all'esterno.

Se uso le var del CSS

.lineheight {
    --height: 400px;
    width: 600px;
    height: var(--height);
    background: lightgray;
}

.lineheight p {
    text-align: center;
    line-height: var(--height);
    margin: 0;
}

Metodo Padding

<div class="outer-box">
    <div class="inner-box"></div>
</div>

.outer-box {
    --inner-height: 200px;
    width: 100%;
    padding: calc(50vh - calc(var(--inner-height))/2) 0;
    background: lightgray;
}

.inner-box {
    margin: 0 auto;
    background: coral;
    width: 200px;
    height: var(--inner-height);
}