How to center a div in CSS? | Center div easily in CSS?

How to center a div in CSS? | Center div easily in CSS?

How to center a div in CSS | css center div | html center div

Hey friends, today I'll teach how to center any div in CSS using 3 methods in 3 sections. Before we dive in, I'll introduce myself. I'm CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel here or by searching for CodingPorium on YouTube for more!


Introduction

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:

Text-align center HTML

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:


Check it more css responsive menu | CSS animated Menu  countdown timer html javascript | free countdown timer  Custom checkbox in CSS ? | Create a custom checkbox using CSS ?  bootstrap navbar - responsive  bootstrap navbar   notification css style | html top bar slide down notification 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,

display: flex;
 justify-content: center;

Your output would be the same as earlier:


                    Check it more css responsive menu | CSS animated Menu  countdown timer html javascript | free countdown timer  Custom checkbox in CSS ? | Create a custom checkbox using CSS ?  bootstrap navbar - responsive  bootstrap navbar   notification css style | html top bar slide down notification 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:

i) HTML
<div class="container">
  <div class="child"></div>
</div>

ii) CSS
.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:
Check it more css responsive menu | CSS animated Menu  countdown timer html javascript | free countdown timer  Custom checkbox in CSS ? | Create a custom checkbox using CSS ?  bootstrap navbar - responsive  bootstrap navbar   notification css style | html top bar slide down notification 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.


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

.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:
Check it more css responsive menu | CSS animated Menu  countdown timer html javascript | free countdown timer  Custom checkbox in CSS ? | Create a custom checkbox using CSS ?  bootstrap navbar - responsive  bootstrap navbar   notification css style | html top bar slide down notification 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:
Check it more css responsive menu | CSS animated Menu  countdown timer html javascript | free countdown timer  Custom checkbox in CSS ? | Create a custom checkbox using CSS ?  bootstrap navbar - responsive  bootstrap navbar   notification css style | html top bar slide down notification css

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:

Check it more css responsive menu | CSS animated Menu  countdown timer html javascript | free countdown timer  Custom checkbox in CSS ? | Create a custom checkbox using CSS ?  bootstrap navbar - responsive  bootstrap navbar   notification css style | html top bar slide down notification 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. 

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestions you have. To subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!

Written by: @codingporium

Check it more

Post a Comment

Previous Post Next Post