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.

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>

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

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

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

Comments

[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.

[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 :).

[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.

[Jordan Kicklighter]

You bet, keep up the good work!

[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.

[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.

[Davey]

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