Ever been asked during an interview to center a div? No? Neither have I, but apparently this is a thing. Or just an industry running joke.

Wheter you need it for an interview or just daily work, it's important to know how to do it in more than just one way. And... boy, there are many. All of them have their pros and cons. The issue may be trickier than expected because of how browsers treat certain CSS properties.

I will try to cover as many methods as I can think of and suggest what to consider when using each one. I'll be going from arbitrarily worst to best

Each example assumes you are using something similar to the following structure:

<div class="container">
    <div class="center-me">
</div>

For this article we will assume that container has some kind of fixed dimensions and is being displayed as a block initally.

1. Transform

.center-me {
    position: absolute;
    transform: translate(50%, 50%);
    left: -50%; 
    top: -50%; 
}

Ahh, truly the OG way to center your lil' friend. What we do here is we first use transform to move our div 50% of width of parent away from its left border and 50% of height away from top border. That leaves us with center-me's top-left corner being centered inside of parent. Not exactly what we expected (as we want child's center to the actual center), so we need to move child's position -50% horizontally and -50% vertically so that both parent's and children's center align. Nice thing about this one is that it's the only way of centering when you cannot modify parent.

PROTIP: You may consider using inset-inline and inset-block instead of left and top for better display for languages where the text is being read from right to left.

Pros:

• the most popular approach
• works with every browser
• does NOT modify parent

Cons:

• using transforms should be avoided, because how overwhelming it is for GPU to manage many transforms on memory-constrained devices
• left and top trigger layout recalculations which should be avoided if possible

2. Flexbox

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

If you're lucky enough to change parent display to flex then you can use it. Simply center elements in flexbox: justify-items: center; to center it on the main-axis and align-items: center to cetner on the cross-axis.

Pros:

• efficient - no unneccessery layout recalculations
• widely supported by basically all of the browsers (supported by 98.42% of global traffic)
• no need to modify child

Cons:

• modifies parent's display mode, which may be affecting your layout in other ways

3. Display: grid

.container {
    display: grid;
    place-items: center;
}

Woah, just a two-liner? Yep, that's why I love it. Again, in this scenario, we have to modify the parent instead of the child, which might not be what you want in your case. Yet, if you can change the parent's display, then I think it may be the best approach to center elements.

What we do here is simply display the parent as a grid and use its property place-items to center its children both horizontally and vertically.

Simple, concise, efficient, and fairly supported - what else could you ask for? In my opinion, that's the way to go.

Pros:

• Efficient - no layout recalculations.
• Short - only two lines of code (!)

Cons:

• Might not be the best choice if you're looking for full browser support (currently supported by 97% of global traffic).
• Modifies the parent instead of the child.

4. [Bonus] Javascript approach

.container {
    position: relative;
}
.center-me {
    position: absolute;
}

    const container = document.querySelector('.container');
    const centerMe = document.querySelector('.center-me');

    const { width, height } = container.getBoundingClientRect();
    const { width: centerMeWidth, height: centerMeHeight } = centerMe.getBoundingClientRect();

    centerMe.style.left = `${(width - centerMeWidth) / 2}px`;
    centerMe.style.top = `${(height - centerMeHeight) / 2}px`;

Who says you have to use CSS to position your elements? Maybe you don't need your website to work efficiently, or you just feel a bit rebellious today? Thanks to getBoundingClientRect, we are able to get an element's dimensions and later modify the element's style using the following formula: take the container's width, subtract the child's width, and divide by two. Do the same with height, and there you have it.

I don't really see a point in positioning using this method, but you might find yourself in a situation when using CSS won't be an option.

Pros:

• Doesn't use CSS, if that's what you are looking for.

Cons:

• Modifying left and top triggers layout recalculations.
• getBoundingClientRect makes the browser calculate element sizing, which is also inefficient.

5. [Bonus] WebAssembly approach

#[no_mangle]
pub extern "C" fn calculate_position_x(
    parent_width: f32,
    element_width: f32
) -> f32 {
    let x = (parent_width - element_width) / 2.0;
    x.max(0.0)
}

#[no_mangle]
pub extern "C" fn calculate_position_y(
    parent_height: f32,
    element_height: f32
) -> f32 {
    let y = (parent_height - element_height) / 2.0;
    y.max(0.0)
}

const calculateModule = await WebAssembly.instantiateStreaming(
    fetch('calculate.wasm'),
    {}
);

const container = document.querySelector('.container');
const centerMe = document.querySelector('.center-me');

const { width, height } = container.getBoundingClientRect();
const { width: centerMeWidth, height: centerMeHeight } = centerMe.getBoundingClientRect();

const x = calculateModule.instance.exports.calculate_position_x(width, centerMeWidth);
const y = calculateModule.instance.exports.calculate_position_y(height, centerMeHeight);

centerMe.style.left = `${x}px`;
centerMe.style.top = `${y}px`;

Okay, I'm messing with you at this point. It's pretty much the same solution as the previous one, but in this case, you do the calculations in WebAssembly. I've chosen Rust for this example, but you can also pick C, C++, or anything else (assuming you REALLY would want to try out this method). Elegant? Lightweight? Probably not. Still, it's nice to know how to incorporate WASM code snippets into your JavaScript modules in case you ever need it or just to have a brief idea of how to do it.

You may ask yourself - why didn't I create a function that returns a vector of numbers as a result? Because WebAssembly works nicely with primitive values only; returning vectors requires some additional bindings. There is a nice way of doing this using wasm_bindgen, but it requires you to set up a whole Rust project and install dependencies, which I didn't want to do.

Pros:

• Street credit

Cons:

• WASM binaries are usually heavyweight, and so it is in this example (the mentioned Rust snippet is over 1.4MB).

SUMMARY

As you can see, there are many ways to center an element in a container. Behind this humorous task, there is actually a big dose of technical traps to keep in mind. If you were to choose just one method, I'd recommend you number #3 (grid). It's a simple and efficient approach using up-to-date browser capabilities, with only one downfall: it is still not fully supported by all browsers.