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

How to make a private repository in Git Hub

  Step 1 is to create a gitignore file in that directory. So open Git Bash in the desired directory. Then use the command below to accomplish the task. Here you can add name of files or folders which you don't want to add in your github repository. Adding the file name or file directory name will simply ignore that file or file directory. touch .gitignore Step 2 is to Initialise. So use the command below to initialize. git init Step 3 is to add content to staging area. So use the command below to add all the content to staging area and prepare all the content to be added to your repository.  git add . Remember all the files except the file names added in the gitignore file will be added to the staging area. Step 4 is to make our first commit. So use the command below to make a commit. Here i called my first commit as "Initial Commit" you can call it "First Commit" or whatever you like. git commit -m "Initial Commit" Step 4 is an optional step, but i in
Post a Comment
Read more

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

[SOLVED] An AMP component 'script' tag is present, but unused - Search Console issue for wordpress website

I Encounter this issue " An AMP component 'script' tag is present, but unused." in my search console for a wordpress website.  I was using "Newspaper 9" wordpress theme with AMP enabled with the help of plugin provided by NEWSPAPER THEME. Everything was going good until i got this error. An AMP component 'script' tag is present, but unused. It was clear the error was due to a change in my website code. I recently got Adsense approval for my website and it was pretty clear that it was due to " AMP ADS ".  I think that my website was adsense approved a few days ago and this could be the reason that AMP-ADS were not setup properly. I used GOOGLE SITE KIT to implement Auto Ads as well as inserting the Ad-code for Adsense approval.  How I solved This Issue I tried many ways to implement amp-ads with the help of AMP Plugin provided by newspaper, Google Site kit. I also tried many Amp settings in my Adsense Dashboard. Luc
Post a Comment
Read more