ADVERTISEMENT

How to Center a Div in CSS? 3 Ways to Center Div

Telegram Group Join Now

ADVERTISEMENT

How to Center a Div in CSS? 3 Ways to Center Div

Center a Div in CSS
Center a Div in CSS

 

ADVERTISEMENT

ADVERTISEMENT

3 Ways to Center Div Using CSS

Hey friends, today I’ll teach how to center any div in CSS using 3 methods in 3 sections.¬†Now when making web development projects or components for your website, you often need to center certain items or elements of the website. The easiest way to do it is by assigning a div class for your HTML element and then styling the div class in CSS.

1. Aligning Div Horizontally

First, we will learn how to align horizontally. There are several methods for this such as below:

ADVERTISEMENT

Text-align center HTML

ADVERTISEMENT

 text-align: center;

50+ HTML, CSS & JavaScript Projects With Source Code

Used to align text horizontally easily. For this, add the following code in the CSS of your div class, text-align: center; The sample output would be:

 

 

ADVERTISEMENT

Center a Div in CSS
Center a Div in CSS

 

Flex Display

If you’re familiar here reading articles at the CodewithRandom blog, you might know I’ve written an article on flexbox before which I recommend you to read at¬†here. Use the flex display code below and justify-content property to align the center horizontally. The code would be,

ADVERTISEMENT

display: flex;
justify-content: center;

Your output would be the same as earlier:

ADVERTISEMENT

 
                    Center a Div in CSS

 

2. Aligning Vertically

Now that you know how to align the center horizontally, let’s see how to do it vertically and lastly both together (perfect center).

The classical positioning
This method is a very classical and basic method to align the center vertically. Add the following codes below:

HTML Code
<div class="container">
  <div class="child"></div>
</div>

 

CSS Code
.container {
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
border-radius:10px;
  background-color: blue;
  /* Center vertically */
  position: absolute;
  top: 50%;
}
Your output would be something like below:
Center a Div in CSS
Center a Div in CSS

Alright, this method earlier is very beginner-friendly but not really good practice for professionals. So, now we will start upgrading our methods slowly at a smooth pace.

ADVERTISEMENT

Transform and Translate
We use the same code as earlier for this but with a change of the following in CSS.

ADVERTISEMENT

.container {
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
border-radius:10px;
  background-color: blue;
  /* Center vertically */
   position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
The output would become:
Center a Div in CSS
Center a Div in CSS
The high-end Flex Method
Now, we will use the flex display method instead. Add the following instead in CSS for the main/parent div class (container):
.container {
  display: flex;
  align-items: center;
}

The output would become:

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Center a Div in CSS
Center a Div in CSS

 

ADVERTISEMENT

3. Aligning Center Vertically and horizontally (perfect center)

This is the main challenge people struggle with. However, with our knowledge earlier, we can definitely complete this. We will use our high-end skills by using flex for this(even though there are some rookie/amateur methods too)

Add the following code instead for the parent/main class (container):

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

And your output would be:

Center a Div in CSS
Center a Div in CSS

You may also use other methods such as the basic position method, and the transform and scale method based on what you learned in sections 1 and 2.

I hope you now can center a div or any object in CSS using these 3 methods listed in the 3 sections.

5+ HTML CSS Projects With Source Code

Thank You!

comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!

Written by: @codingporium

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT