Hello DEVelopers!!
We will see how to center an element in css using different ways.
For all the examples, I will be using below html as common one.
<div class="parent">
<div class="child"></div>
</div>
Using Position
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Using margin in position
margin: auto works only for horizontal alignment.
But we can make it to work in both directions using below code.
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
//by giving top,left,right,bottom values as 0 now child's width and height is exact to parent.
width: 800px; //assuming random width
height: 200px; //assuming random height
margin: auto; //margin auto works for both vertical and horizontal alignments
}
Using Flex
.parent {
display: flex;
align-items: center;
justify-content: center;
}
Using Grid
.parent {
display: grid;
justify-content: center;
align-items: center;
}
Using Table
.parent {
display: table;
width: 100px;
height: 100px;
}
.child {
display: table-cell;
vertical-align: middle;
width: 50px;
height: 50px;
text-align: center;
}
Using text-align to center horizontally
.parent {
display: block;
text-align: center;
}
.child {
display: inline-block; //key point
}
Using line-height to center vertically
It works fine if there is only one line.
.parent {
height: 200px;
}
.child {
line-height: 200px; //same value of parent height
}
Using margin as auto to center horizontally
.child {
width: 50%;
margin: 0 auto;
}
Top comments (6)
I learnt it from a youtube video and forgot the reference.
I just tried this. Magical!
Nice collection of hacks for centering HTML elements!
As a best practice using flex or grid makes centering much more clear.
Thanks bro!
By the way, I prefer using Flex for all cases, and you?
Hi Matheus!
It depends on design. Even I prefer using Flex in all cases ✌️.
Oh, Can you elaborate on your issue, Ryan?
Some comments have been hidden by the post's author - find out more