Absolute Centering in CSS

Manisha Basra
Jan 9, 2019 · 2 min read

If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline elements) or margin: 0 auto; (when working with block element). But when it comes to center something both horizontally and vertically the job can be a little tricky to achieve.

In this article, we’ll check out several techniques to completely center an element. You can find the complete code on codepen.io/jscodelover

Using Position and Transform property

.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

These properties are set on the child element. Absolute positioning bases the element’s position relative to the nearest parent element that has position: relative. If it can’t find one, it will be relative to the document. Add top: 50%; left: 50%; because the position is calculated from the top left corner.

created using draw.io

You must pull back the item with the half of its width and height. You can achieve this with transform: translate(-50%, -50%);

Using Viewport Unit

.child{
margin: 50vh auto 0;
transform: translateY(-50%);
}

We use the margin-left/margin-right: auto; for the horizontal centering and use the relative vh value for the vertical centering. Of course, you have to pull back the item like in the absolute example (but only translate the height). Note :- This method only works if you are positioning to the main viewport.

Using Flexbox

.parent{
display: flex;
justify-content: center;
align-items: center;
}

Setting the parent(or container) to display: flex; it let the browser know that we intend the children to use flexbox for their layout. Justify-content determines how to space your content in your row or column. Align-content is similar to justify-content, but controls where the items are on the cross axis.

Instead of using justify-content and align-items we can use margin: auto; in child.

.parent{
display: flex;
min-height: 100vh;
}
.child{
margin: auto;
}

Using CSS Grid

.parent{ 
display: grid;
grid-template-rows: 100vh;
grid-template-columns: 100vw;
}
.child{
justify-self: center;
align-self: center;
}

On the parent set display: grid;and specify the row/column width. On the child set the justify-self and align-self to center. The justify-self and align-self property set the way a box is justified inside its alignment container(parent) along the appropriate axis.

Follow me on Twitter, LinkedIn or GitHub.

I hope this article is useful to you. Thanks for reading & Keep Coding !!

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Manisha Basra

Written by

JavaScript Developer. Having a passion for understanding things at a fundamental level and sharing them as clearly as possible. *jscodelover on Github*

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store