In this post, we will use 3 different ways to center element:
- horizontally
- vertically
- horizontally and vertically
First let’s set the initial css properties for all three methods.
CSS
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}1. CSS Margin Property
In this method we are going to use margin to center element horizontally.
To Center Horizontally
First, we need to give width to the containing element (<div class=”center”></div>) otherwise it’s width will be full width of the page. This is because div is a block element.
Next, set margin-top and margin-bottom to 0. And finally set margin-right and margin-left to auto. This will put same amount of space on each side of the box.
HTML
<div class="center"> <div class="box"></div> </div>
CSS
.center {
width: 250px;
margin: 0 auto;
}
.box {
width: 250px;
height: 250px;
background-color: red;
}2. CSS Property Position
a) To Center Horizontally
To center the .box horizontally, we have to set it’s position to absolute. And set .center (div) to position to relative.
HTML
<div class="center"> <div class="box"></div> </div>
CSS
.center {
position: relative;
}
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
}So why did we set position of .box to absolute and position of .center to relative?
When we set position absolute to .box, it will allow us to move .box in relation to it’s containing element or parent element which is .center (div element) in our code example.
Therefore we need to set parent element position to relative.
With that information let’s move the box at the center of the page.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
left: 50%;
}
As you can see it’s not at the center of the page (box’s left side is at the center).
To center it, we have to move the box to left side. But by how much?
We should move it by half of the box total width.
This can be done by transform: translate(-50%).
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
left: 50%;
transform: translate(-50%);
}
If you know the exact width of the element you are centering, you can use margin-left.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -125px;
}b) To Center Vertically
To center vertically we have to give height to containing element.
HTML
<div class="center"> <div class="box"></div> </div>
CSS
.center {
position: relative;
height: 100vh;
}You may wonder why we didn’t give width to containing element to center the box horizontally before.
This is because our containing element is div. It is a block element and by default it covers the whole width of the page.
Now set top: 50% to box.
CSS
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
top: 50%;
}
In the diagram you can see the top side of the box is vertically centered.
To center the box vertically we have to move it up by negative half of it’s height.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
In our example we know the exact height of the box we are centering, so we can also use margin-top.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
top: 50%;
margin-top: -125px; /* half of it's height */
}c) To Center Horizontally and Vertically (at the center of the page)
We already learned how to center horizontally and vertically so centering the box at the center of the page is pretty straight forward.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
}
As explained before, the box is not at the center of the page. Only top and left side of the box is a the center.
To center the box, apply transform: translate property as before.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Since in our example code we know the exact width and height of the box, we can use margin shorthand.
.box {
width: 250px;
height: 250px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
}3. CSS FLEXBOX
a) To Center Horizontally
To center element horizontally, first set display property of parent element to flex
And then set flexbox property justify-content to center.
HTML
<div class="center"> <div class="box"></div> </div>
CSS
.center {
display: flex;
justify-content: center;
}
.box {
width: 250px;
height: 250px;
background-color: red;
}b) To Center Vertically
To center vertically, we have to use align-items property and set to center.
We also need to give height property to parent element. (Here we have set height to 100vh)
You may wonder why set height to 100vh. I will explain that at the end of this post.
HTML
<div class="center"> <div class="box"></div> </div>
CSS
.center {
height: 100vh;
display: flex;
align-items: center;
}
.box {
width: 250px;
height: 250px;
background-color: red;
}
c) To Center At the Center of Page (Horizontally and Vertically)
To center the box at the center of the page, we have to apply justify-content: center and align-items: center to containing element.
HTML
<div class="center"> <div class="box"></div> </div>
CSS
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 250px;
height: 250px;
background-color: red;
}
Why we set height to 100vh when centering element horizontally?
In CSS parent element must have height property if you want to center it’s children element vertically.
Here in our code examples, when we are vertically centering the element at the center of the page we need parent element height to be same as the viewport(or page).
Therefore to accomplish this we used 100vh.
If we apply certain height to the parent element than element will center vertically to that height.
.center{
display: flex;
align-items: center;
height: 500px;
border: 1px solid black;
}
.box{
width: 250px;
height: 250px;
background-color: red;
}
Here .box is not vertically centered on the page because it’s parent element height is 500px. It is therefore centered vertically within that height of 500px.