html - 没有 jquery 水平居中模态

Question

我正在 React 应用程序中处理模态，width 设置为 auto，position 为 fixed，我正在尝试让它水平居中在屏幕中间。

.Modal {
    position:fixed; 
    width: auto;
    z-index: 500;
    align-content: center;
    background-color: rgba(255, 255, 255, 0.889);
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px black;
    padding: 0px;
    font-size: 12px;
    box-sizing: border-box;
    transition: all 0.3s ease-out;
}

我已经尝试了一些在搜索使模式居中时出现在堆栈溢出中的解决方案。

我遇到的主要问题是，此模态高于 z-index 上的其他元素，如果我将 position 更改为 absolute，正如大多数示例所暗示的那样，在 z-index 上呈现在其下方的元素会向下移动屏幕。

这对我不起作用。

Answer 1

尝试将 margin:0 auto; 添加到您的 css 并删除 position:fixed。