How TO Center A Div In CSS

As a Newbie in the World of CSS, centering a div can be one of the hardest CSS styling you would face and that can really be frustrating 😩.

Centering a div

But I have a great news for you 🥳, I just simplified it to the simplest way that even a baby can understand and apply, if you’re excited to learn this, then lets dive right in.

I will be showing you, two method of centering a div using CSS.

1. Using Position Property

2. Using Flex property

USING POSITION PROPERTY

<! — — — Html —Starter —  Template— >-
<header class="parent-container">
<div>Center ME!!!! </div>
</header>
<! — — — Html — Template →-

When trying to center a div, you must ensure that you give your parent container a height. your parent container can be a header, main or a section.

The particular section or area you want your div to be centered in , give it a height and then you want to give the parent container a position of relative.

(if you want to learn more about the Position property, you can let me know in the comment section and I will create an article on ABSOLUTE AND RELATIVE POSITION) so lets continue….

So after giving your parent container a height and a position of relative,

Then you give the div you want to center a position of absolute, top:50%, left:50%, transform: translate(-50%, -50%). let me write the code for you, for clarity:

div{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}

BOOOM!!!!! you just centered a div 👏.

In general, your CSS styling should be like this, using this as an example:

header{
height: 50vh;
width: 50vw;
position: relative;
}
div{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}

USING FLEX PROPERTY

Flex property is a tool every one learning CSS should know, if you want to learn about CSS flex property you can check out my article on Flex.

But what we want to focus on now is on how we can use the flex property to center a div. even though you’re not familiar with flex you can just apply what I will be sharing in this article so you can be able to center a div.

I will be listing the steps you need to follow to achieve this and then I will write out a snippet of the code for you, lets dive right in.

When you’re using flex property to center a div, the parent container is the one that gets all the styling as you would see as we proceed.

1. As usual you would give your parent container a height.
2. Set its display property to flex
3. Set its align-items property to center
4. Set its Justify-content property to center

That’s it, you just got your div centered. Like I promised, I will be writing out the code for you. You can use it as a guide when writing your CSS styling.

We are still using our simple html starter template as shown above.

header{
height: 50vh;
width: 50vw;
display: flex;
align-items: center;
justify-content: center
}

That’s all, you just centered a div using flex property.

Thanks for following me through this journey I hope it’s worthwhile. Give this article 50 claps if it was useful.