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.
Oh, Can you elaborate on your issue, Ryan?
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 ✌️.
Some comments have been hidden by the post's author - find out more