DEV Community

Cover image for Centring an element on a page
Davey
Davey

Posted on • Updated on • Originally published at dave-s.Medium

Centring an element on a page

There are no doubt multiple ways of centring an element on a page using CSS, but here I present 2 different techniques that are straightforward and easy to implement. You could use these techniques for centring a login box, or an information message, etc. in the middle of a page.

Vertically and Horizontally Centred divs

Implementation

To center a couple of divs, I've defined them on the page as follows:

<div class="centered1">I am centered div 1.</div>
<div class="centered2">I am centered div 2.</div>
Enter fullscreen mode Exit fullscreen mode

There's nothing special about these divs apart from they have the classes centered1 and centered2 respectively.

Technique 1

The class .centered1 uses an absolute position for the div and sets it to display 50% from the top and 50% from the left of the page. The margin of the div is then set to margin: -200px 0 0 -250px;. Since the div is 500px across and 400px wide, this margin has the effect of moving the div 250px left and 200px up, making it display in the center of the page.

.centered1 {
    position: absolute;
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    background-color: goldenrod;
    margin: -200px 0 0 -250px;
}
Enter fullscreen mode Exit fullscreen mode

Technique 2

The second technique is almost the same as the first, but this time I haven't used the margin to position the div in the middle of the page.

As previously, I've set the position to absolute and given the div a width and height. I've set the top and left properties to 50% to move the top left corner of the div to the centre of the screen.

Finally, I use a transformation to move the center of the div to be on the center of the page. transform: translate(-50%, -50%);. Again, the result is that the component is displayed in the center of the screen.

.centered2 {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

Further Thoughts

Here, I've shown two simple techniques. I could probably have created the same effect using FlexBox or a Grid layout, or probably a number of other ways. If there are any different techniques that you use, please leave a comment below.

Acknowledgements

Photo by Thought Catalog on Unsplash

Top comments (7)

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

Hey Davey, these techniques are no doubt straightforward; however, they are fairly rigid because if the reliance on position: absolute. You mention flexbox and grid, and I think those would be a more appropriate approach if the element doesn't specifically require absolute positioning for some other reason.

Centering in flexbox is trivial. On the parent, simply put the following:

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

That gets you a both horizontally and vertically centered child. You can remove either one (or change them to other values) based on how you want horizontal and vertical positioning to go. If you haven't done so, definitely give flexbox a go. It's well worth the time to learn because it simplifies basically everything layout related. And the Grid makes it even easier. flexboxfroggy.com/ is an awesome resource for it.

Collapse
 
davey profile image
Davey

Thanks for that Jordan. I’ve been looking at Flexbox but it’s taking a while for me to fully understand it. What you’ve done certainly looks easier so I'll give it a try. Thanks :).

Collapse
 
davey profile image
Davey

Using FlexBox, a 3rd box can be centered on my example above with code like:

<div class="center-container">
    <div class="centered">I am a centered div using FlexBox</div>
</div>
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.centered {
    width: 600px;
    height: 500px;
    background-color: aquamarine;
}

Thanks everyone for the advice.

Thread Thread
 
jwkicklighter profile image
Jordan Kicklighter

You bet, keep up the good work!

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

No problem! Feel free to send me a message if you have any questions. Like I mentioned, that froggy game does an excellent job of showing how each piece works individually and then has you put them together into more complex layouts.

Collapse
 
trostcodes profile image
Alex Trost

I can’t agree with Jordan more. The absolute positioning methods explained here don’t allow for changes in screen or content size. Please use flex box and Grid to center things.

Thread Thread
 
davey profile image
Davey

Thanks for the feedback Alex. I’m fairly new to CSS so thanks for explaining :)