Flexbox 在一个盒子中居中

Question

所以我对 flexbox 有点陌生，我试图把这个段落放在一个 flexed div 中，并让它有一个最小宽度，这样它就不会延伸到整个页面。但是，一旦我在 div 框上添加了一个最小宽度，它就会停止使我的内容居中超过移动宽度。我将在下面添加一个 sn-p，如果有人需要进一步澄清这个问题，请告诉我。感谢任何花时间审查此内容并为我提供建议的人！

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  display: flex;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
}

#description {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #BBBBBB;
  margin: 15px;
}

@media only screen and (min-width: 760px) {
  #smaller {
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    min-width: 200px;
    max-width: 400px;
    flex-basis: auto;
    /* default value */
    flex-grow: 1;
  }
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <div id="smaller">
    <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

Answer 1

它没有居中，因为您限制了容器的总宽度：

#smaller {
    display:flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    min-width: 200px; /* limits width; no space for centering */
    max-width: 400px; /* limits width; no space for centering */
    flex-basis: auto;
    flex-grow: 1;
}

相反，设置文本元素的限制：

#description {
  min-width: 200px;
  max-width: 400px;
}

jsFiddle

Answer 2

因此，对于 flexbox，display: flex 必须应用于您要定位的任何内容的父元素，并且只会直接影响子元素。

然后，您需要将 flex-direction 更改为列，以便所有元素在彼此下方对齐。

试试这个而不是 #whoheading css

#who{
  color:#10D0C9;
  font-family: 'Philosopher', sans-serif;
  display:flex;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  flex-direction: column;
}

Answer 3

很确定你根本不需要使用 flexbox。 auto 的左/右边距将水平居中调整大小的元素。你的标题不需要 flexbox，只需要text-align: center;。 #description 上的 flex 居中属性实际上也不是任何东西居中。这是您在没有任何 flex 属性的情况下简化的代码 - 这就是您想要的吗？

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  text-align: center;
}

#description {
  color: #BBBBBB;
  margin: 15px;
}

@media only screen and (min-width: 760px) {
  #description {
    margin: 15px auto;
    min-width: 200px;
    max-width: 400px;
  }
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

Answer 4

您不需要使用 flexbox 进行如此简单的居中。
max-width 和 margin: auto 就足够了。

https://jsfiddle.net/gnka8pky/

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  text-align: center; /* centered text */
}

#description {
  color: #BBBBBB;
  margin: 15px auto; /* left and right margin = auto */
  max-width: 400px; /* text will not stretch past this point */
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <div id="smaller">
    <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

如果您需要将链接置于底部的中心，则需要将其设为块元素并使用text-align: center。或者添加一个额外的块级包装器，如 div 并将文本居中。

a.goals {
  display: block;
  text-align: center;
}