使用 CSS 居中 <DIV>答案

【问题标题】：Centering <DIV> with CSS使用 CSS 居中 <DIV>
【发布时间】：2020-06-21 18:59:58
【问题描述】：

我已经建立了以下网站：

我正在尝试将“黄金计划”白色 CSS 框居中，以便它整齐地放在“我们的包”标题下方。

白框需要编辑的CSS代码是：

.investment_plans{

    height: 100%;
    background-position: center 0;
    background-size: cover;
    position: relative;
    padding-top: 100px;
    padding-bottom:120px;
}

我已经玩了几个小时了，但无法找到使盒子居中的方法。

任何帮助将不胜感激。

干杯。

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题得到解决或者您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Reproducible example (or MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
在这种情况下，将margin: 0 auto添加到白块div中，它将居中。
居中 div: margin-left: auto; margin-right: auto;，不应该有 position 并且不应该有使元素使用 100% 宽度的子元素 - 对于初学者。

标签： html css center

【解决方案1】：

如果您想使用 CSS 使 div 居中，您可以尝试下面的代码将 div 置于屏幕中间

.investment_plans{
  height: 100%;
  background-position: center 0;
  background-size: cover;
  position: relative;
  padding-top: 100px;
  padding-bottom:120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

【讨论】：