How to center contents in HTML?

1. Text Centering using text-align: center

Let's finish this one quickly because this one is really simple and most of us are already this.

Here is a recepie

<p>Indian Soya Bean</p>

Here is centered recepie

<p class="text-center">Indian Soya Bean</p>

.text-center {
    text-align: center;
}

Here is a link to learn more about this CSS property: https://www.w3schools.com/cssref/pr_text_text-align.ASP

2. Centering absolute elements

<p
    style="
      position: relative;
      height: 500px;
      background-color: rgb(152, 194, 194);
    "
>
    <img
        width="200px"
        class="absolute-center"
        src="https://humornama.com/wp-content/uploads/2021/11/Jethalal-Looking-From-Window-Meme-Template-on-TMKOC-608x365.jpg"
        alt="indian soya bean"
    />
</p>

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(x-axis, y-axis); */
    transform: translate(-50%, -50%);
}

/* just for centering horizontally */
.absolute-horizontal-center {
    position: absolute;
    /* top: 50%;  not needed for horizontal centering */
    left: 50%;
    transform: translateX(-50%);
    /* OR */
    /* transform: translate(-50%, 0%); */
}

3. Centering using Flex

<p class="flex-center">
    <img
        width="200px"
        height="200px"
        src="https://humornama.com/wp-content/uploads/2021/11/Jethalal-Looking-From-Window-Meme-Template-on-TMKOC-608x365.jpg"
        alt="indian soya bean"
    />
</p>

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

    height: 500px;
    background-color: rgb(80, 62, 184);
}

4. Centering using margin

<div>
    <img
        class="margin-center"
        width="200px"
        height="200px"
        src="https://humornama.com/wp-content/uploads/2021/11/Jethalal-Looking-From-Window-Meme-Template-on-TMKOC-608x365.jpg"
        alt="indian soya bean"
    />
</div>

.margin-center {
    margin: 0 auto;
}

Check the same code here Codesandbox

That was all folks 😎!

Do share this with your friends and colleagues.

Want to see what I am working on? Github

Want to connect? Reach out to me on Linkedin

Follow me on Instagram to check out what I am up to.