如何将弹窗内的按钮居中？前端代码调试求助

你的按钮已经设置了display: block和固定宽度，只需要添加左右自动外边距就能让它水平居中。

原因：块级元素在指定宽度后，margin-left: auto和margin-right: auto会让元素在父容器内自动分配左右剩余空间，从而实现水平居中，这是块级元素居中的标准实现方式。

修改后的.popup-btn CSS代码（两种写法任选其一即可）：

写法一：合并margin属性 #

.popup-btn {
    display: block;
    text-decoration: none;
    width: 30%;
    margin: 2.5rem auto 0; /* 替换原margin-top，同时设置上下和左右外边距 */
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
    color: #FFFF;
    background-color: #3B7197;
    border: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    cursor: pointer;
    letter-spacing: 0.1rem;
}

写法二：单独设置左右外边距 #

.popup-btn {
    display: block;
    text-decoration: none;
    width: 30%;
    margin-top: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
    color: #FFFF;
    background-color: #3B7197;
    border: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    cursor: pointer;
    letter-spacing: 0.1rem;
}

内容的提问来源于stack exchange，提问作者user19791361