Skip to main content

3 Best Ways to center a div inside a div using css only

I will talk about 3 ways to 'Center a div inside a div using css'. All the 3 methods are very easy and even a beginner can understand the concept. However i will also provide the code in this post. 
Stay Tuned till the last method as i will center a div inside another div by using just 2 lines of code

OUR CODE'S PRE WORKOUT

Follow these 3 steps before using any of the method to center a div inside a div. 

1. Before You use any of the trick to center the div using css make sure you have removed the by default margin (8px) and padding (8px) and don't forget to set box sizing to border box.

Code to do the magical stuff :

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2 .I assume that you have marked the class of main div as class="parent_div" and the class of inner div as class="child_div"


3. Now I will give blue color so that we can check the div easily and can debug accordingly and 100% width to the parent div just to make the div responsive. 

#1 : First way to Center a div using CSS

In this first method we would use positions. We will center the div by using relative and absolute positions. We will give position="relative" to the parent_div and  position="absolute" to the child_div. 

When we give relative and absolute positioning to a div awe then have access to 4 more properties of css i.e. "top", "left", "right", "bottom".

Code to do magical Stuff 


.parent_div{
    background-color: blue;
    width: 100%;
    height: 100vh;
    position: relative;
}

.child_div{
    background-color: green;
    width: 60%;
    height: 60vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



#2 : SECOND WAY TO CENTER A DIV

This method is a easier method especially for the beginners, who don't want to confuse themselves with advance positing concepts of css and also for those who don't know about the transform property of css3.

Now I will use Css Flexbox properties to center a div inside a div. Here I will pass a few css properties to the parent_div and will leave the child div untouched. I will set the display:flex; and to make our child_div horizontally centered, will pass justify-content:center; and will pass align-items:center; to make my child_div vertically center.

Code to do Magical Stuff

.parent_div{
    background-color: blue;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Important Note:  Don't use this method to center a div inside another div if you have text inside the parent_div. This will cause overlapping between the text of parent_div and the child_div elements.



#3 : THIRD WAY TO CENTER A DIV

This is the easiest way to center a div inside a div. As I told above, I will only use 2 line of code to center a div inside another div.
I will use display:grip; property and place-items: center; property to make the div center inside another div.
.parent_div{
    background-color: blue;
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
}


Important Note: This method will horizontally align the text in the parent_div.


Pictures of css code comparison


Pictures of div centered inside a div


Here is the Html Code
html code to center a div inside a div

 Here is the result of first code #1
This is most recommended as well as my favourite.


Here is the result of second code #2


Here is the result of third code #3





CONCLUSION - WHICH METHOD SHOULD BE USE??

I told you about 3 interesting ways to center a div inside a div. Now you would be confused, Which method should be used and why?

There is  a simple answer to this tricky question. 

Use #1 Method if you have text in the parent_div and you don't want to mess with the text inside the parent_div. 

Use #2 Method only if the parent_div is empty (i.e. the parent_div doesn't have text inn it)

Use #3 Method if you have text in parent_div and you also want to horizontally align text to the center.

##My favourite way to center a div inside another div is by using relative and absolute positions. I always prefer the #1 Method to center a div inside another div.


Hope you like the Article and I welcome you to read more Articles at JAPSIMRAN.BLOGSPOT.COM

Also tell your favourite method amongst the 3. If you know another easy way to center the div inside a div, don't hesitate to comment below.

Comments

Post a Comment

Popular posts from this blog

Access or select tags, items, div, class, id, etc using xpaths | Scrapping Guide

When we learn web scraping or web automation its very important to understand the concepts of "XPATHS" and using them to get most benefit.  You would be surprised to know that XPATHS Version 1 was created in 1999 and since then we have many version of xpaths and many more to come. But current browsers only support XPATHS Version 1 . Learning XPATH is really easy as well interesting.  Now I will tell you about the structure of XPATHS in rest of the Blogpost Structure of XPATHS   There no need to go deep inside XPATHS if you primarily want to learn web scraping or web automation but remember these two points given below to make your life easier. Remember that a XPATH always start with two forward slash "//"  After 2 Forward slash comes the element name such as "p", "div", etc. Example of XPATH: Here are 3 examples which will facilitate the learning of XPATH and will make the stuff as easy as a loaf of bread. Example...
Post a Comment
Read more

How to change working directory of a python program - Using built in OS Module

 This blogpost is all about finding your current working directory and changing according to your choice Check current working directory for python program Follow the code snippet below to find your current working directory. This is the path in which your python program is currently running. import  os print ( os. getcwd ()) Change current working directory of your python program Follow the code snippet below to accomplish the task. import  os os. chdir ( ' c://desired_folder ' ) This will change your current working directory path to your desired path 
Post a Comment
Read more

Inbuilt PHP functions for Wordpress - Basic Wordpress Theme Development

while(have_posts()) {} This in built function of php runs the following program we have posts. But 1 concept in not clear yet. This while loop will run n number of times or if we don't use or fetch the post using while loop then will the loop go infinite times? To understand this we must be clear of the for loop If we use the_post(); function of wordpress then only we can make the loop finite.  Make sure to use the_post();  to fetch the post and this is important to finish the loop. Else the while loop will go infinite. Example of correct loop  : <?php while ( have_posts () ){      the_post ();      echo " hello " ; } ? > The above loop will print hello = no. of posts. Example of incorrect loop : <?php while ( have_posts () ){      echo " hello " ; } ? > The above loop will print  hello  infinite no. of times. ...
Post a Comment
Read more