在 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>