Centering HTML elements larger than their parents

Centering HTML elements larger than their parents

It‘s not a common problem, but I‘ve run into it a few times. How do you center an element when it is larger than it‘s parent? I mean really center it, where content overflows both the left and right borders of the parent element equally.

The default behaviour in HTML and CSS (using margin:0px auto;) is to line up the left edges of the child and parent elements while all the overflowing happens on the right side. That‘s not centered at all; it‘s most definitely offset to the right, which is painfully obvious if what you really wanted was to have the center of the child element line up with the center of the parent element, regardless of size.

IMHO, the ideal behaviour would look something like this image:

So I was working on a project that required the behaviour I was expecting, rather than what HTML and CSS normally provides with a simple margin:0px auto; declaration. It also had to fit a few other strict criteria which ruled out several other "solutions" you can find out there.

1. Has to work for children of varying widths, not just those of specified pixel dimensions.
2. No absolute positioning or floating
3. No JavaScript - The effect needed to work whether or not JavaScript was enabled or disabled.

Item #1 rules out the simplest solution which merely applies a negative left margin to the child element. If we know how wide the parent is, and how wide the child is, then we just need to apply a negative left margin that is equal to the difference of the child element and parent element widths, divided by two. If we don‘t know the width of the child element, setting a specific left margin is just going to make it look weird for all widths except one.

Item #2 rules out positioning solutions that use combinations of percentage positioning to achieve a centered child element. But because this removes the element from the flow of the document, the bottom of the parent element will cinch up and the content below it will collide with the content of the child element. I needed the parent element to remain tall enough to contain the height of the entire child element; it‘s only the width I was concerned about here.

Finally, Item #3 rules out JavaScript solutions that test the parent and child elements after the page has loaded and determines what negative margins or positioning values to set. This works every time, except if JavaScript is disabled. Granted that isn‘t often these days for visual browsers, but I still did not want to depend on script for something that was clearly just a styling issue.

Eventually I happened upon a solution that fit all three criteria above, and although it came with a few issues of its own, I decided I could live with them. You may know of a different or even better way to accomplish this, but here‘s what I came up with.

First, instead of setting a width or margins for the parent element wrt the page context, let it expand to the full width. Then relatively position it with a value of right:50%;.

This puts the center of the parent element directly on the left border of the page centering context. Since the parent element is now the same width as the page centering context, that means its right border is exactly in the center of the page centering context! We exploit this fact as we move on.

What we want to do now is to move the center of the child element so it aligns with the right border of the parent element. In order to do this, the child element needs to be centered within the parent element so the center of the child element is also sitting on the left border of the page centering context.

Okay, leap-of-faith here: Even if it doesn‘t look like it‘s centered, as long as you apply the correct centering styles, the child element will behave as if it were centered when you apply the negative margins we‘ll need in the next step.

But we have a problem. How do you center a block if you need to specify both margin:0px auto; for centering and also a negative margin-right? Doing this will override one of the auto values of the margin and the child element will no longer be centered. Is there another way to center a block?

YES! We can use our old friend text-align:center; to center inline elements within the parent block. To make the style applicable to the block child element we are using, we‘ll turn it into a hybrid usingdisplay:inline-block;. This change introduces a restriction though, which prevents us from having other inline content abutting either side of the child element. Otherwise the text-align will not center our block properly. The child element needs to be the only inline element on the "line". So we‘ll have to remove our little "This is the parent element" note to move forward.

Like I mentioned before, it doesn‘t look centered, but its calculated position will behave as if it is when we apply the final step, the negative margin-right. With the parent block‘s left border resting in the center of the page centering context, we now know the distance between where the center of the child element is now, and where we need it to be: exactly half the width of the parent element.

This being said, you‘d think a negative margin-right of 50% on the child element would move the center point nicely, but in fact it doesn‘t. Actually it only appears to move the block 25% of the width of the parent element.

This is indeed odd, and if someone knows why it behaves this way, I would be grateful to hear it explained. In any case, this oddity is no big deal to overcome; just specify a negative margin-right of 100% instead:

Centered! Now the only problem we‘re left with is the parent block; we don‘t want to see it. Hiding the parent block is simple, we‘ll just remove the border and make sure its background is transparent. We can‘t use display:none; or visibility:hidden; here because that would also affect the visibility of the child element.

And the code: (Important styles are highlighted)

div#context {
  border:1px solid blue;
  width:400px;
  margin:0px auto;
}
div#context div {
  position:relative;
  right:50%;
  text-align:center;
}
div#context div p {
  border:1px solid green;
  width:450px;
  height:50px;
  display:inline-block;
  margin-right:-100%;
}

<div id="context">
  Page centering context
  <div>
    <p>
      This is the child element<br />
      which should be centered
    </p>
  </div>
</div>

We‘re done! The great benefit of this system, despite the restrictions, is that it is uniquely dynamic. You can change the width of the child element to whatever you like and it will remain centered wrt the page centering context, either smaller or larger.