CSS Positioning Relative to Center

Nigel B. Peck
Jan 5 · 4 min read

Absolute positioning does not include a property to take position relative to center. It doesn’t need one; but we need a way to achieve it.

There’s not much to this, but it has some caveats, and we’ll look at those.

Having discussed this on Twitter, there seems to be some confusion around it, and where it fits in the larger spectrum of technologies we call CSS.

Let’s take a look at how CSS can be used to declare an absolute position relative to center without hacking margin.

TL;DR

There is a clean approach to declaring absolute position relative to the center of the containing element, that only uses a single declaration.

The approach is to use calc(): left: calc(50% — 200px); — instead of the old left: 50%; combined with the hack: margin-left: -200px;.

The approach of transform: translate(-50%, -50%) is great for centering on that position. See the end of the article for a complete set of examples.

Background

When you are using absolute positioning in CSS, there are two properties to control horizontal position. They are, quite surprisingly, left and right.

They’re used like this:

This declares that ex should be 100 pixels from the top side, and 20% of the distance from the left side, of the containing element.

You can use right to do the same from the right side:

With me so far? If not, try here.

What About a “center” Property?

There is no property center, to take position from the center, and there doesn’t need to be. But we do need a way to achieve it.

A common approach to centering is to use the CSS transform function translate(), or its sibling translateX()

This would position the center ex horizontally at the center of the containing element. Fine; this works. But…

Positioning Relative to Center

That doesn’t help us to position relative from the center — a certain distance from it. It only helps us to position exactly at the center.

This part of the picture has traditionally been achieved using margin. So to declare a position 200 pixels to the left of center, we use:

Or margin-right: 200px: effectively moving the left edge of ex 200 pixels left of separately declared position. Messy, right?

It’s a hack. It’s using margin for something it’s not designed for; which prevents it from being used for what it is designed for. It’s using two declarations for one instruction. It’s not intuitive. We can do better.

The calc() Function

CSS provides the calc() function. It’s used to dynamically calculate values. So we can combine it with left to calculate a position relative to center:

Taking 50% of the width of the enclosing element, which gives us the center, we can use calc() to add or remove any value that we want from it, in any length unit, or a percentage. This works exactly as we might expect that a center property would.

Isn’t that cleaner? Effectively it works in the same way that the margin approach did, except declared properly. You can see exactly what it does. It’s a single declaration. It uses CSS the way it’s designed, which is always better.

Centering on that Position

What if we want to center ex on that position? Rather than position the left edge there. No problem, we can continue to use transform:

Now we have ex centered on a position 200 pixels to the left of the center of the containing element, and the CSS reads exactly that way; no double-take, no need to remember a hack, no explaining weirdness to beginners.

Bonus: Include Vertical Position

I suppose it’s not really a bonus — the article wouldn’t be complete without vertical centering — but I left it out above to keep things simple.

To combine this with declaring a vertical position relative to center, use the same idea:

Becomes:

To align the center point of ex on that position, use translate(-50%, -50%).

Becomes:

Conclusion

Here is a complete set of examples summarising everything above.

The examples use 200pxas the value, but this could be substituted for any length, including relative units or percentages.

Browser Support

The browser support is good, see Can I use calc() as a CSS unit value?.

The Heart of Software

New for 2020.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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