March 7, 2021
Issues we've come across, and how we fixed them.
[CSS] How To Center An Image That's Too Big For Its Container

The header of this website, we wanted it to be centered regardless of the viewing screen. Now, we can always do this using Javascript and jQuery, but we wanted a more elegant solution using CSS if possible.

Here's what we came up with:

  • margin-left: 50%;
  • transform: translateX(-50%);

So, you'd think that it would get pushed to the left 50% and then right back to its original location, but it doesn't. The margin-left is dependent on the container, while the transform is dependent on the image itself. Now, this will only work horizontally, but that's all we really needed, so it was a perfect solution for us and for the top of this website. Gotta love it when things come together. The header, no matter what screen you're using, looks elegant and is positioned well.

 Profile Picture

Proudly Serves

Allentown, Bethlehem, Lehigh Valley... and everywhere else!

Follow Our Socials