CSS: ottenere un header a tutto schermo con Flexbox

Short link

Con i CSS possiamo ottenere un header a tutto schermo con Flexbox.

Con i CSS possiamo sfruttare l'allineamento di una griglia Flexbox usando le proprietà align-items e justify-content per ottenere la centratura orizzontale e verticale. Per ottenere la piena altezza, usiamo l'unità di misura vh (viewport height).


html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
}

header {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}

h1 {
    margin: 0;
    text-align: center;
    width: 100%;
}

Demo

CSS: full screen header with Flexbox

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.