Three Ways to Centre a Div Using CSS


How to center a div using CSS 


Hello, people today we will see how we can perfectly center a div present inside another div both horizontally and vertically. The centered div will be completely responsive across all devices.

This trick can come in handy while making small single page projects like a Calculator, Weather App, Expense tracker, To-do list, and so on.

We'll look at three different CSS methods for centering a div.

1) Using CSS Positions

2) Using CSS flexbox
 
3) Using CSS Grid




We have two divs here with the class names outer_div and inner_div respectively. Both are given separate classes if you don't have any idea about what classes are and how they are used you can check out our HTML attributes tutorial. Inside the inner div, we have one <h1> tag which displays Hello World on the screen.


1) Using CSS Positions


In CSS the position property is used to define how an element is positioned inside the web page. There are various types of positioning in CSS like static, relative, absolute, fixed, etc.we have used relative and absolute positioning in this method.

What is relative positioning?

When we give relative A point defined with reference to another position ) positioning to an element it will move relative to its original position. If we don't give any additional positioning to it will stick to its original position. 

Suppose if we add a position relative to our outer div and an additional position such as left 20px and top 30px. It will move relative to the original position without affecting the flow of other elements.

Have a look at this diagram below you will have a clear understanding of relative positioning.

What is absolute positioning?

The absolute positioning allows you to place your element wherever you want. The absolute positioning is done relative to the positioned parent element. If there is no position given to the parent element it will position itself according to the HTML page.
 
In our case, the outer div has a position set to relative and the inner div has a position absolute. Now if we add any position to our inner div it will move relative to the outer div.  

Have a look at this diagram below you will have a clear understanding of absolute positioning.Here we have given top 50px and right 30px to inner div.


Our inner div has relative positioning of top 50%  and left 50% what it will do is it will start our inner div from 50% top and 50% left have a look at the diagram below. But we want our div to be exactly in the middle horizontally as well as vertically to do so we will use the translate method.



The translate method moves an element from its current position based on the value given for the x and y-axis. Here we have a value of the x-axis as -50% and y-axis as -50% so our inner div will move 50% towards the left and 50% towards the top from its original position. Look at the diagram below the div in blue color represents position after translating along the x-axis and the div in black color represents the perfectly centered div after translating along the y-axis. 




This is how our perfectly centered inner div will look like after applying CSS.



2) Using CSS flexbox



The area of the container using a flexbox is called a flex container. To create a flexbox we set a display property to flex. When we apply display flex to an element all its direct child become flex-items.  

After assigning the display flex property to the outer div, our inner div will behave as a flex-item, and when we assign the justify-content and align-items properties to the centre, our inner div will align itself to the centre in respect to the outer div.

It's very easy to use flexbox to centre a div. I often use this method to centre a div responsively with only three lines of code.


display : flex ;

justify-content : center ;

align-items : center ;
 
3) Using CSS Grid



The CSS grid is different from the CSS flexbox because the flexbox was designed for one dimensional layout either a row or column at a time. Grid was designed for a two-dimensional layout both row and column at the same time.

The area of the container using a CSS grid is called a grid container. To create a CSS grid we set a display property to the grid. When we apply the display grid to an element all its direct child become grid items. 

The place-items property is a combination of justify-items and align-items property. It is used in centering an element within the container.

display grid ;

place-items center ;



These are the three methods for centering a div within another div. I hope you enjoyed this article. Please leave your suggestions in the comments section below.



HAPPY LEARNING !!!


Post a Comment

Previous Post Next Post