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。

Answer 2

添加“保证金：0自动；”不适用于位置为固定的项目。

要么丢掉固定头寸，要么做保证金：0自动；

或将左侧位置设置为（50％-宽度元素/ 2）。

但是我想第一个解决方案是最简单的。

Answer 3

由于模态是固定位置的，因此需要使用左或右css属性来更改模态的水平位置。但是您具有自动的“宽度”功能，因为宽度可能会有所不同，因此无法使用。最简单的方法是将模式包装在父div中，如下所示：

.modal-parent {
  position: fixed; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  top: 0;  
  left: 0;  
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  padding: 40px; 
  background: white; 
}

<div class='modal-parent'>
  <div class='modal'>

  </div>
</div>

或者如果您不希望父div，则可以为其设置静态宽度，并且高度可以变化：

.modal {
  position: fixed; 
  padding: 40px; 
  box-sizing: border-box;
  top: 0;  
  left: calc(50% - 150px);  
  width: 300px;
  background: teal;
}

<div class='modal'>

</div>

水平中心模态，无需jQuery

3 个答案: