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

我已经成功地将这两个黑色按钮放在灰色div的中间，使用flexbox-like `

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

我认为问题是因为我将

width设置为100%；display:flex

so我想知道是否有一种解决方案可以在不设置显示的情况下将黑色按钮居中：flex div不使div全宽并阻止我单击或如果我可以禁用外部div可单击性，但保留该div下的页面和黑色按钮可点击性。

（我已经试过在innerDiv中玩minor

z-index

，而在outerDiv中玩过）

也许让你知道我正在使用React、SCS和StyledComponents是有用的查看这篇文章

尝试将其添加到outter div：

pointer-events: none

---

这是因为宽度：100%在室外

---

设置#outerdiv{width:auto；margin:0auto；}使其居中

您可以在外部div上将CSS属性

指针事件设置为
无
，
也可以在黑色按钮上将其设置为
auto





使用
位置：相对和
z指数：1
在
#innerDiv
@webomjaipur上，我已经试过了：你可以共享在线链接或编译的HTML代码吗？它不会居中。它出现在最左边，而不是中间，这是因为你有位置：固定。在这种情况下，可以为其设置固定宽度，然后向左：calc（50%-（固定宽度/2））
pointer-events: none