CSS: How to center an element that overflows its parent?

There are dozens of ways to center (vertically or horizontally) an element within its parent in CSS when the parent is bigger than its content.

But when the opposite occurs, it becomes more complicated, especially if both have variable sizes.

It's not really more complicated, you'll see that the code is very simple, but you had to think of it.

This issue can notably arise when you want to display a video that must cover the entire screen (and be centered), regardless of its ratio, personally it's to solve this problem that I resorted to this solution.

The same issue wouldn't necessarily happen with an image, because you could set it to "background-size: cover;" and "background-position: center center;"

Except you can't always do that! So here's the piece of CSS that will let you center (vertically or horizontally) a child element bigger than the element it's contained in.

The solution

Here's the little piece of code that can save you quite a bit of time:

.child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

You see, it's very simple, it's universal and it works everywhere! If you think it's magic, keep reading the article, I'll explain how this technique works.

Note that the solution also works when the parent is bigger and is compatible with all browsers (97,98%, IE9+)!

Result

.parent { width: 300px; height: 200px; padding: 20px; box-sizing: border-box; border-radius: 5px; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); } .child { position: relative; background-color: #2c3e50; border-radius: 5px; width: 100%; height: 300px; top: 50%; transform: translateY(-50%); }

Here I chose not to put "overflow: hidden;" on the parent element to show you where the overflow happens, but it's up to you to decide whether to hide it or not depending on your use case!

Explanation

The "top" property in CSS, when used with a percentage, moves the child element relative to its closest positioned parent (anything except position: static).

The percentage is therefore relative to the size of the parent (in this case the height), so "top: 50%;" places the top of the child element at half the height of the parent.

But here's where the trick gets clever: for the "transform: translateY(n%);" property, the percentage is equivalent to the height of the selected element (here the child element).

So, for a parent element with a height of 200px and a child element of 300px, "top: 50%" will equal 100px, while "translateY(-50%);" will equal -150px.

100 - 150 = -50px, so the top of the child element will position itself above (in overflow) the top of the parent element, and will therefore be centered.

Conversely, if the parent is 400px tall, the calculation will equal 50px and will also be centered, but without any overflow this time!