CSS: how to create a fullscreen header with Flexbox

We can create a fullscreen header with CSS Flexbox.

We can use the align-items and justify-content properties for horizontal and vertical centering. In order to set a full height for our header we can specify a value in 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%;
}

You can see the above code in action on the following page.