Having trouble centering div in CSS

Question

I'm working with one of my first pages. It contains a pop-up that needs to be centered in the exact middle of the page. I'm aware that there are many ways to do this, but I'm having trouble with each one of them;

The first one I tried is this:

        <div class="mod" id="modal">
            <div class="mod-header">
                <div class="mod-title">15% off for new customers</div>
                <button data-close-button class="close-button">&times;</button>
            </div>
            <div class="mod-body">
                <h2>subscribe to our newsletter and get 15% off your first purchase</h2>
                <form method="POST">
                    {{ form|crispy }}
                    {% csrf_token %}
                    <button class="submit-btn" type="submit">go</button>
                </form>
            </div>
        </div>

Styles:

 .mod{
        position: fixed;
        transition: 200ms ease-in-out;
        transform: translate(-50%, -50%) scale(0);
        border: 1px solid black;
        z-index: 999;
        padding: 1.2em;
        background-color: #f6f1eb;
    }
    .mod.active{
        top:50%;
        left:50%;
        transform: translate(-50%, -50%) scale(1);
        -webkit-font-smoothing: antialiased;
    }

The problem with this is that I'm getting a blurry effect in the div. I tried everything (webkit antialiasing, setting translate to 51%, etc) and it won't change.

Some other ways of centering implicate selecting the parent container, but that's impossible in my case since this is a large website and I need this to be in the center of the entire page, not the container.

I also considered using calc() instead of translate() and subtract the width and height of the container, but then I'd need to know the dimentions all the time, and it would lose the responsiveness.

Is there any better way to do this? I'm sure it's very simple, but I'm a beginner and don't know much. Let me know if I'm lacking code or I'm not being clear enough. Thanks in advance!

Answer 1

Just give your modal another container and it's good to go.

 .mod { /* Remove background if backdrop is not needed */ background: rgba(0, 0, 0, 0.1); position: fixed; /* 0, 0, 0, 0 gives 100% full height and width on absolute/fixed elements */ top: 0; left: 0; right: 0; bottom: 0; }.mod.wrapper { width: 300px; height: 300px; /* since there's no feature to vertically center you need margin top, while the auto will center horizontally automatically whatever the width is. Do note that left, top 50% is quite unreliable since it doesn't take into account the size of the container */ margin: 10% auto 0; background: white; display: block; border-radius: 4px; text-align: center; }

 <,-- Will be the one that is position fixed --> <div class="mod" id="modal"> <:-- While this one will make the modal look; with this you can use margin left/right: auto to automatically center horizontally regardless of the width --> <div class="wrapper"> <div class="mod-header"> <div class="mod-title">15% off for new customers</div> <button data-close-button class="close-button">&times;</button> </div> <div class="mod-body"> <h2>subscribe to our newsletter and get 15% off your first purchase</h2> <form method="POST"> </form> </div> </div> </div>

Answer 2

Change the position property of the modal to absolute and add top and left property to it. Remove other properties of the active class and add only display property to it.

 let btn = document.querySelector("#btn"); let closeBtn = document.querySelector(".close-button"); let modal = document.querySelector("#modal"); btn.addEventListener("click", () => { modal.classList.add("active"); }); closeBtn.addEventListener("click", () => { modal.classList.remove("active"); });

 .mod { position: absolute; top: 50%; left: 50%; display: none; width: 400px; transition: 200ms ease-in-out; transform: translate(-50%, -50%); border: 1px solid black; z-index: 999; padding: 1.2em; background-color: #f6f1eb; }.active { display: block; }

 <button id="btn">Show Modal</button> <div id="modal-container"> <div class="mod" id="modal"> <div class="mod-header"> <div class="mod-title">15% off for new customers</div> <button data-close-button class="close-button">&times;</button> </div> <div class="mod-body"> <h2>subscribe to our newsletter and get 15% off your first purchase</h2> <form method="POST"> Your content here! <button class="submit-btn" type="submit">go</button> </form> </div> </div></div>