html - 你如何在 flexbox 中居中内容

Question

我有图片和文字，它们目前位于 flexbox 的左侧。

我遇到的问题是浏览器大小超过 1000 像素的任何内容都会在右侧留下很大的开放空间。所以我想做的是，如果浏览器宽度为 1000 像素或更大，则内容居中，这样我就可以摆脱空白。

我无法在我的媒体休息时间将这些元素居中。我需要针对这些情况的帮助。

section {
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
    
    width: 80%;
    margin: 1em auto;
    
    border: solid .125em #00aaff;
    background-color: white;
    opacity: 0.9;
}

section > figure {
    flex: 1 1 25%;
    text-align: center;
    align-self: center;
    padding: 1em 0em;

}

section > article {
    flex: 1 1 75%;
    align-self: center;
    line-height: 1.6;
    padding: 1em 0em;
}

figure img {
    width: 75%;
}

@media screen and (min-width:1000px) {
     /*Center the content in the middle of the flexbox*/
}

<section>   
        <figure id="image1">
            <img src="images/512x512.png" alt="Dynamo">
        </figure>
         
        <article>
                <p>Houston Dynamo</p>
                <p>Sport Science/Sport Performance Intern</p>
                <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
        </article>
        
        <figure>
            <img src="images/UW-Logo.png" alt="Wisconsion">
        </figure>
        
         <article>
                <p>University of Madison Wisconsin-Madison</p>
                <p>Strength and Conditioning Coach, Graduate Assistant</p>
                <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
        </article>

Answer 1

使用 margin: 0 auto 使部分居中。

section {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: solid .125em #00aaff;
}

@media screen and (min-width: 1000px) {
  section {
    width: 50%;
    margin: 0 auto;
  }
}

<section>
  <figure id="image1">
    <img src="//placehold.it/100x100" alt="Dynamo">
  </figure>

  <article>
    <p>Houston Dynamo</p>
    <p>Sport Science/Sport Performance Intern</p>
    <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
  </article>

</section>
<section>
  <figure>
    <img src="//placehold.it/100x100" alt="Wisconsion">
  </figure>

  <article>
    <p>University of Madison Wisconsin-Madison</p>
    <p>Strength and Conditioning Coach, Graduate Assistant</p>
    <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
  </article>
</section>