3 Simple ways to center div in 2020This has been an age old question for frontend dev on how to center a div in a page. As you can imagine, there are multiple clever solutions which developers have used to achieve this.
3 Simple ways to center div in 2020
This has been an age old question for frontend dev on how to center a div in a page. As you can imagine, there are multiple clever solutions which developers have used to achieve this. As browsers have evolved over the years, we can do things in a simple way as opposed to some tricks which have been used in the past.
TLDR: Use the Flex or Grid solution mentioned below
Define the problem
Most of the times, we would like our content to be vertically centered in the page. This will give a nice look to the content and easy for viewers to read. So let’s create a page which will have two divs - One is the
page div and the other is
I am going to demonstrate this in a .Svelte file but these solutions can be achieved in plain HTML and CSS
Page will cover the whole height of the viewport and so we will give the value
Content doesn’t need any more styles but we will provide the width, height, background-color to get a better visual representation of the solution.
1. Old fashioned Way
Before we get to the solution we can use now. It will help to understand the old but still golden way to center a div.
Mark the element with
absolute positioning and then set the top to 50% and then transform the element to -50%
transform: translateY(-50%) translateX(-50%);
This method can still be used and it is quite good. One major disadvantage is when you want to add other transforms or animations to the content, it might not work as intended
2. Flex solution
Flex box has been a great tool set for frontend dev to achieve various styling needed for the elements. This has been my go-to solution for most of the CSS positioning solutions now and it is really easy to center a div vertically as well.
This solution involves adding styles to the parent container instead of the child content. This will ensure that all the children within the div are aligned properly.
justify-content controls the position of the children based on
flex-direction property. Default value of
row and so in this case,
align-items control the vertical alignment and
justify-content controls the horizontal alignment.
One other good thing about this solution, is that even if you have more than one children, all of them will be centered based on the available space.
Bonus: You can also add styles to the child element to center it vertically provided that the parent is a flexbox
margin: 0 auto;
3. Grid solution
Grid on CSS is also very cool technique to create a variety of different layouts. We can use that as well to vertically center a div although it might be a overkill if you just have only one child inside.
Note: The previous solution of setting
justify-content also works with
display:grid but we will look into more on how to use grid properly.
grid-row: 2 / span 1;
margin: 0 auto;
grid-template-rows: repeat(3, 1fr);
We are dividing the spaces available into multiple pieces, The column will consist of
1fr which is short for
1 flexible length. The browser will take all the available space and assign it to each row or column based on how they are split.
Consider the case of
grid-template-rows, we are using the
repeat function to duplicate the
1fr unit three times. This will result in creating three row and the available space is split equally between them. If you want the second row to have double the space than other, you can use
2fr instead of
After dividing the space, we need to assign the content to one of the space in the grid. We can do this by setting the
grid-row property in the content and specifying the start-row and then how many row it should span. Since we have three rows now, the content will start from 2nd row and span for 1 row which mean it will just occupy the 2nd row.
Since we are not dividing the columns into more pieces, you can set the
margin: 0 auto in the child to center the content horizontally. You could also divide the column into three pieces and set the content in the 2nd column and span 1 column as well.
Bonus: You can have the element span multiple rows which can be useful if you want some element to be bigger than others
Although the concept of placing the element in the center might seems very simple, there are multiple solutions to choose from and each has some limitations. You can choose the one which is very trivial to start with and then add complexity if needed. We recommend using the flex for simple usecases and grid solution for more complex use cases. Also remember to check the browser compatibility of these properties to make sure these properties work in your supported browser’s list.
You can check the browser compatibility in this link below