DEV Community

loading...

Different ways to centre an element in css

akashvarma9 profile image Akash Varma ・1 min read

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;
}

Discussion

pic
Editor guide
Collapse
svaani profile image
Vani Shivanand
.parent {
display:flex;
}

.child {
margin:auto
}

I learnt it from a youtube video and forgot the reference.

Collapse
danielpdev profile image
danielpdev

Nice collection of hacks for centering HTML elements!
As a best practice using flex or grid makes centering much more clear.

Collapse
yujiri8 profile image
Ryan Westlund

Cool! The position method hadn't occurred to me.

Collapse
makampos profile image
Matheus de Campos

Thanks bro!
By the way, I prefer using Flex for all cases, and you?

Collapse
akashvarma9 profile image
Akash Varma Author

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