A Complete Guide to Center Div in CSS
Designers often face the difficulty to place the box at the center of other box or a page (horizontally or/and vertically). The box may be an inline or block level element.
Developers find it difficult to align the content at the center. We'll solve the following problems for vertical and horizontal alignment.
div at the center of a page
center div within another div
center two divs within a parent div
center three divs within a parent div
The following are the best methods that work in all modern browsers to center div.
1. Center div within a page
There are two cases to center div div within a page. In the first case, we fix the position of div. In the second case, we define absolute position for div.
Fixed Position
In first case, we don't care about the dimension of a page and place the div at the center of screen. The screen size may vary for different devices but these properties center div element. We fix the position of div by position:fixed; property.
Example
<style>
div{
width:50%;
height:30%;
border:1px solid red;
position:fixed;
left:25%;
top:35%;
}
</style>
Try </>
In this case, one problem may arise while taking the values of width and height in percentage (%). As the screen size decreases the width or height of div may decrease below a specific limit. Set the min-width and min-height attributes to solve the problem.
We get the values of left and top attributes in the following way.
35% = (100%-30%)/2
25% = (100%-50%)/2
In all of the following examples, the value of left is calculated by obtaining a difference of widths of two boxes and dividing by 2. The value of top is calculated by obtaining a difference of heights of two boxes and dividing by 2.
Example
<style>
div{
width:50%;
height:30%;
border:1px solid red;
position:fixed;
left:25%;
top:35%;
min-width:150px;
min-height:150px;
}
</style>
Try </>
We get the values of left and top attributes in the following way.
35% = (100%-30%)/2
25% = (100%-50%)/2
Absolute Position
In second case, we take the dimension of a page into our consideration. And we specify the position:absolute property to center div element.
Example
<style>
body{
height:1000px;
position:relative;
}
div{
width:50%;
height:30%;
border:1px solid red;
position:absolute;
left:25%;
top:35%;
}
</style>
Try </>
We must specify position:relative property for parent element (here the <body> is parent element).
Whatever the size of the page, the div will always be at center.
In both cases, if we take the width and height of the box in pixels (px), the size of div is fixed and we can't precisely calculate the values of the left and top properties. So div is no longer at the center for different screen sizes.
2. center div within parent div
relative and absolute position
We use relative and absolute position to center div within parent div element.
Example
<style>
div.outer{
width:300px;
height:300px;
border:1px solid black;
position:relative;
}
div.inner{
width:120px;
height:100px;
border:1px solid red;
position:absolute;
left:90px;
top:100px;
}
</style>
Try </>
We must specify the position:relative property for the outer box otherwise the inner box will be aligned with respect to page and not outerbox. In the above example, the dimension of both boxes was fixed.
The values of width and height may also be specified in percentage (%) to make it more flexible.
Example
<style>
div.outer{
width:100%;
height:100%;
border:1px solid black;
position:relative;
}
div.inner{
width:60%;
height:40%;
border:1px solid red;
position:absolute;
left:20%; /* 20% = (100%-50%)/2 */
top:30%; /* 30% = (100%-40%)/2 */
}
</style>
Try </>
We obtain the value of left by taking a difference of width of both boxes and dividing by 2. Same is the case with top property.
margin:auto;
This property automatically aligns the div element at the center of other box (both horizontally and vertically).
Example
<style>
div{
width:60%;
height:55%;
border:1px solid black;
position:absolute;
margin:auto;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
</style>
Try </>
We must specify position:absolute property, and set the values of top, right, bottom and left to 0px.
This method is perfect to align the div element at the center of other element.
3. Center two divs within parent div
float and margin
In this case, we have to float two divs within a parent div and then margin property adjusts the remaining space to center them.
The height and width of parent box is 400px. The width of two children elments sums up to 80%. And the remaining 20% space is distributed in such a way that it aligns divs at center.
And height is only 40% of the parent element. The remaining 60% space is divided into two parts (margin-top:30% and margin-bottom:30%).
30%=(100%-40%)/2
6.67%=(100%-80%)/3
'3' is the number of spaces between two divs
You may also use absolute property instead of float and margin to center two divs. But we'll use absolute property to center three divs within parent div.
4. Center three divs within parent div
We'll specify position:absolute property for three divs. We have to sum up the width of three divs and the remaining space is calculated to center three divs.
The width of parent box is 400px and height is 200px. The width of three child divs is 30% summing up to 90%.
The remaining 10% is divided by 4 to get equal space between divs.
30% = (100%-40%)/2
2.5% = (100%-90%)/4
4 is the number of spaces between three divs
Learn about the css space between to align the items.
Was this article helpful?
