How to horizontally center an element using CSS?

In this post, we will discuss the different approaches to make an element centered using CSS. Let’s consider we have the following parent and child element.

<div class="parent">
    <div class="child">Content</div>
</div>

Following is the style to make it horizontally centered.

<style>
    .parent{
        display: flex;
        justify-content: center;
    }
</style>