html - 无论屏幕大小如何，使用 CSS 将 flex 元素居中

Question

问题摘要:我无法弄清楚为什么我的网页上的图像仅在屏幕较小时居中，而在我的桌面上图像左对齐。

问题主体:我是第一次使用 HTML 和 CSS 构建网站，虽然我正在学习大量教程和阅读资源，但我仍然对 flex 元素的概念感到困惑。在我当前的网站上，我有三个水平排列的图像，当我在笔记本电脑上查看页面时，它们居中。但是，当我在较大的桌面上查看它时，所有图像都是左对齐的。我已经在这里搜索了几十页关于在 CSS 中使元素居中的内容，但到目前为止没有任何意义——然而，这可能是由于我自己对 CSS 和 HTML 的使用太天真了。我已经在下面发布了我的 CSS 和 HTML 代码。当我展开屏幕时，这段代码中是否存在错误地左对齐图像的内容？ (注意:这是我在 Stack Overflow 上提出的第一个问题，虽然我已经阅读了发布问题的指南，但我希望您能提供任何关于如何使这个问题更清楚的反馈)。谢谢你! (另外，仅供引用，因为这是我的第一篇文章，所以我还不能嵌入图片，否则我会有我正在谈论的内容的屏幕截图)。

/* Box Model */

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* Containers */

.container {
  margin-left: auto;
  margin-right: auto;
}

.container.\31 25\25 {
  width: 100%;
  max-width: 100em;
  min-width: 80em;
}

.container.\37 5\25 {
  width: 60em;
}

.container.\35 0\25 {
  width: 40em;
}

.container.\32 5\25 {
  width: 20em;
}

.container {
  width: 80em;
}

@media screen and (max-width: 1680px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 100em;
    min-width: 80em;
  }
  .container.\37 5\25 {
    width: 60em;
  }
  .container.\35 0\25 {
    width: 40em;
  }
  .container.\32 5\25 {
    width: 20em;
  }
  .container {
    width: 80em;
  }
}

@media screen and (max-width: 1280px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 81.25em;
    min-width: 65em;
  }
  .container.\37 5\25 {
    width: 48.75em;
  }
  .container.\35 0\25 {
    width: 32.5em;
  }
  .container.\32 5\25 {
    width: 16.25em;
  }
  .container {
    width: 65em;
  }
}

@media screen and (max-width: 980px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 112.5%;
    min-width: 90%;
  }
  .container.\37 5\25 {
    width: 67.5%;
  }
  .container.\35 0\25 {
    width: 45%;
  }
  .container.\32 5\25 {
    width: 22.5%;
  }
  .container {
    width: 90%;
  }
}

@media screen and (max-width: 736px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 112.5%;
    min-width: 90%;
  }
  .container.\37 5\25 {
    width: 67.5%;
  }
  .container.\35 0\25 {
    width: 45%;
  }
  .container.\32 5\25 {
    width: 22.5%;
  }
  .container {
    width: 90% !important;
  }
}

@media screen and (max-width: 480px) {
  .container.\31 25\25 {
    width: 100%;
    max-width: 112.5%;
    min-width: 90%;
  }
  .container.\37 5\25 {
    width: 67.5%;
  }
  .container.\35 0\25 {
    width: 45%;
  }
  .container.\32 5\25 {
    width: 22.5%;
  }
  .container {
    width: 90% !important;
  }
}


/* Flex */

.flex {
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-pack: justify;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 900px;
  min-width: 500px;
}

.flex.flex-2 {
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.flex.flex-2 article {
  width: 100%;
}

@media screen and (max-width: 980px) {
  .flex.flex-2 article {
    width: 100%;
    margin-bottom: 3em;
    auto
  }
  .flex.flex-2 article:last-child {
    margin-bottom: 0;
    auto
  }
}

@media screen and (max-width: 480px) {
  .flex.flex-2 br {
    display: none;
  }
}


/* Box */

.box {
  border: solid 1px #dbdbdb;
  margin-bottom: 2em;
  padding: 1.5em;
}

.box> :last-child,
.box> :last-child> :last-child,
.box> :last-child> :last-child> :last-child {
  margin-bottom: 0;
}

.box.alt {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.box.person {
  border: solid 1px #8dcca9;
  padding: 3em 1.5em;
}

.box.person h3 {
  margin: 0;
}

.box.person .image {
  margin-bottom: 1em;
}

.box.person .image img {
  max-width: 100%;
}

<!-- Main -->
<section id="main" class="wrapper">
  <div class="inner">
    <header class="align-center">
      <h2>A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers</h2>
    </header>

    <section id="three" class="wrapper align-center">
      <div class="inner">
        <div class="flex flex-2">
          <article>
            <div class="w3-circle">
              <img src="images/globe.jpg" alt="Pic 02" />
            </div>
            <header>
              <h3>By Country/Region</h3>
            </header>
            <footer>
              <a href="Data_Management_Trainings.md" target="_blank" class="button">Find Resources</a>
            </footer>
          </article>
          <article>
            <div class="w3-circle">
              <img src="images/computer.jpg" alt="Pic 01" />
            </div>
            <header>
              <h3>By Resource Type</h3>
            </header>
            <footer>
              <a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target=_blank " class="button ">Find Resources</a>
							</footer>
						</article>
						<article>
							<div class="w3-circle ">
								<img src="images/business_woman.jpg " alt="globe " />
							</div>
							<header>
								<h3>By Role</h3>
							</header>
							<footer>
								<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf " target=_blank" class="button">Find Resources</a>
            </footer>
          </article>

        </div>
      </div>
    </section>

Answer 1

.inner {
    display: flex;
    justify-content: center;
}

你的 .flex .flex-2 div 是左对齐的，因为它的父 div .inner 从左到右渲染它的内容(这是 block 元素)&你的 div 被绑定(bind)到一个特定的宽度。 Flexbox 就是使用父容器来对齐它们的子元素 - justify-content 和 align-items 可用于将您的元素从父元素居中。 :)