How to vertically middle align content inside a container

In this tutorial I will show how to align some content vertically middle inside a container using css.

HTML Structure

Let's have our HTML structure like this.

<div class="parent">
<div class="child">
Our content here
</div>
</div>

Without any css properties, it will appear like this:
image

Add CSS

Let's add CSS properties to identity parent and child area.

.parent {
width: 300px;
height: 300px;
background: #424242;
}

.child {
color: #fff;
}

The content will now appear like this.
image

Let's vertically middle the content

Your css for the parent div should be like below to vertically middle align the content inside the child div.

.parent {
width: 300px;
height: 300px;
background: #424242;
display: flex;
align-items: center; /* align vertical */
}

.child {
color: #fff;
}

The content will now appear like this.
image

Vertically and horizontally middle align

If you want to middle align the content both vertically and horizontally, css of the parent div should be like below.

.parent {
width: 300px;
height: 300px;
background: #424242;
display: flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}

.child {
color: #fff;
}

The content will now appear like this.
image