html - 使用 CSS 将弹出窗口居中

Question

我试图将这个弹出窗口居中，但我似乎无法让它在像 iphone 这样的小屏幕上正常工作。在台式机/笔记本电脑屏幕上看起来不错。任何人都可以提出任何想法如何使用媒体查询来使弹出窗口正确居中而不管屏幕尺寸如何？谢谢。

    <style type="text/css">
    #popup {
        display: none;
        background: #FFF;
        border: 5px solid #444;
        padding: 0 15px 15px 15px;
        position: fixed;
        top: 20%;
        left:35%;
        width: 25%;
        min-width: 210px;
        z-index: 100000;
        box-shadow: 0 0 10px #000;
        border-radius: 5px;
        text-align: center;
    }
    #popup-overlay {
        display: none;
        background: #000;
        opacity: 0.5;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
    }
</style>

Answer 1

最简单的方法是使用变换使元素居中。无论元素的宽度/高度如何，这都有效

html, body {
    height: 100%;
    margin: 0;
}

#popup {
    /*display: none;*/
    background: #FFF;
    border: 5px solid #444;
    padding: 15px;
    position: fixed;
    width: 25%;
    min-width: 210px;
    z-index: 100000;
    box-shadow: 0 0 10px #000;
    border-radius: 5px;
    text-align: center;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}
#popup-overlay {
    /*display: none;*/
    background: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

<div id="popup-overlay"></div>
<div id="popup">Look at me!</div>