javascript - 如何在屏幕中间居中 div。或者，如果使用 flexbox，如何禁用外部 div 可点击性但保留内部 div 可点击性？

Question

我已经使用像 this image 这样的 flexbox 成功地将这两个黑色按钮置于灰色 div 中。 `

#outerDiv{
   display: flex;
   justify-content: center;
   width: 100%;
   background: #888; /* Only for demo purposes */
   opacity: 0.86;
  /* Styles for fixing always at bottom */
  position: fixed;
  bottom: 0%;
}

#innerDiv{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

问题是我希望黑色按钮是可点击的，但外部灰色 div 不是。灰色 div 实际上阻止我单击下面的页面(例如图像中显示的“添加到购物车”白色按钮或其点击框下的任何内容)。

我认为问题是因为我设置了width 100%; display: flex 所以我想知道是否有一种解决方案可以在不设置 display: flex div 的情况下将黑色按钮居中，而 div 不会占据全宽并阻止我点击 或 如果我可以禁用外部 div 的可点击性但同时保留该 div 下的页面和黑色按钮的可点击性。

(我已经尝试在 outerDiv 中的 innerDiv 中使用较小的 z-index)

也许让您知道我正在使用 React、Scss 和 StyledComponents 很有用

Answer 1

您可以在外部 div 上将 CSS 属性 pointer-events 设置为 none， 并在黑色按钮上将其设置为 auto 以执行此操作。

• A stackoverflow code example
• The MDN documentation
• An article about its usage