Html 如何使用flexbox将项目对齐到中心

我正在用Bootstrap4创建一个展示。我希望showcase内容居中

因此，我使用flexbox与

对齐项目：居中。但出于某种原因，它不起作用

请解释一下我做错了什么


#展示{
位置：相对位置；
背景：url（“https://source.unsplash.com/random）无重复中心/盖；
最小高度：350px；
}
#展示，覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
}
#展示。展示内容{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
最大宽度：540像素；
身高：100%；
}

我的航向是这里
您的
容器
类未被赋予css规则。因此，我添加了
flex
，使用
justify content:center
规则将其垂直居中。为了使其垂直居中，您需要添加规则
高度：100%
，因为子选择器
showcase.showcase content
已经包含
flex
规则，并且规定
对齐项：居中是没有意义的

将此选择器添加到css：

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}


#展示{
位置：相对位置；
背景：url（“https://source.unsplash.com/random）无重复中心/盖；
最小高度：350px；
}
#展示，覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
}
#展示。展示内容{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
最大宽度：540像素；
身高：100%；
}
.集装箱{
显示器：flex；
证明内容：中心；
身高：100%；
}

我的航向是这里
您可以给
页边距：自动到showcase内容类，或者您可以将此样式指定给容器：

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

但是由于您使用引导，可能此技巧会中断其他代码，因此您应该为您制作另一个容器，将内容展示到容器中，如下所示：

<div class="container">
    <div class="show-case-container">
      <div class="showcase-content">
</div></div></div>


请在回答中添加一些解释。为什么会这样？我希望在不修改boostrap的容器的情况下执行此操作。我在答案中添加了一个描述。如果此
容器
类与
引导
相关，请添加
！重要信息
在
flex
规则之前，以避免
引导
规则重叠。感谢您的解释。它工作得很好！但是我们不能在不修改boostrap的容器类的情况下集中内容吗？是的。现在我将给出这个问题的第二个解决方案，而不涉及容器类。等待几分钟。添加
margin:auto什么也没做。我不想修改引导容器类，所以我说您可以创建另一个容器并将该类提供给它。