Recently I needed to do something relatively simple (or it should be): Ensure that a popup box (modal) opened in the center of a website. I’ve been bad about saving or bookmarking my favorite CSS rules for doing things like this which is why I’m taking a moment to log this now.

In the past, I might do something related to ensuring there was a container div, and I’d do the position: relative, margin: 0 auto, trick. But, thanks to this, I’ve discovered the following way. Which so far, seems to work really well and it’s much easier. You target the modal directly.

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;

This will also be easy to remember because I can think of it as the fixed, 50% transform trick.

Leave a Reply

Your email address will not be published. Required fields are marked *

Billy Wilcosky