在 CSS 中居中 div 時遇到問題

Question

我正在處理我的第一頁。 它包含一個需要在頁面正中間居中的彈出窗口。 我知道有很多方法可以做到這一點，但我對每一種都有問題；

我嘗試的第一個是這樣的：

        <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;
    }

問題是我在 div 中得到了模糊的效果。 我嘗試了一切（webkit 抗鋸齒、設置轉換為 51% 等），但它不會改變。

其他一些居中方式涉及選擇父容器，但在我的情況下這是不可能的，因為這是一個大型網站，我需要它位於整個頁面的中心，而不是容器的中心。

我也考慮過使用calc()而不是translate()並減去容器的寬度和高度，但是我需要一直知道尺寸，它會失去響應能力。

有沒有更好的方法來做到這一點？ 我敢肯定這很簡單，但我是初學者，知道的不多。 讓我知道我是否缺少代碼或不夠清楚。 提前致謝！

Answer 1

只需給您的模態另一個容器，它對 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

將模態的position屬性更改為absolute並為其添加top和left屬性。 刪除active class 的其他屬性並僅添加display屬性。

 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>