Flexbox 在盒子中居中

Question

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

#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

因此对于 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 2

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

#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 3

很确定您根本不需要使用 flexbox。 auto 的 left/right 边距将使已调整大小的元素水平居中。您的标题不需要 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>

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

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

Flexbox 在盒子中居中

Flexbox centering in a box

html

css

centering

flexbox

jsFiddle