javascript - css网格系统中的模态定位

Question

我正在尝试将其按钮在网格第 2 列中单击的模态居中放置。任何人都可以指出正确的方向吗？当然，我不想对任何边距进行硬编码(响应式)。

现在它(绿色 div)仅显示/限制在网格列 2 中，如下所示。

display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
margin: 10px;

class Login extends Component {
  state = {
    isShowModal: false
  };

  openModal = () => {
    this.setState({ isShowModal: true })
  }

  render() {
    const { isShowModal } = this.state;
    return (
      <>
        <div className="grid-1">
        </div>
        <div className="grid-2">
        {isShowModal && <Modal />}
          <div className="add">
            <button onClick={() => this.openModal()} type="button">Open modal</button>
          </div>
        </div>
      </>
    )
  }
}

Answer 1

您好，我想您正在寻找的是 Width max-content，带有一些 padding 和 margin 0px auto。

margin: 0px auto;
width: max-content;
padding: 10px;
max-width:100%; //for responsive purposes.

然后做一个环绕的div，固定位置。并将上述样式应用于周围 div 内的 div

它所做的是制作一个周围的 div，您可以在其中设计您的东西，它将居中。

旁注:如果您的 div 位于其他元素下方，只需将 z-index 设置为 1。

z-index:1;