水平居中可变数量的固定大小列表项[重复]

Question

我很想在这个问题上看到一些观点和意见，因为我在使用 flexbox 和网格时遇到了这个问题。我将在列表中包含可变数量的项目（例如在图片库中），但每个项目的大小都是固定的。现在，我需要将列表项水平居中，并让它们始终对齐。

JSFiddle

	html {
	  box-sizing: border-box;
	}
	
	p {
	  padding: 1em;
	}
	
	.wrapper {
	  max-width: 100%;
	  min-height: 500px;
	  padding: 2em 0;
	  background: papayawhip;
	  border: 1px solid orange;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	}
	
	ul {
	  display: flex;
	  background: mistyrose;
	  width: 100%;
	  justify-content: flex-start;
	  flex-wrap: wrap;
	  margin: 1em;
	  border: 1px solid blue;
	  padding: 0;
	}
	
	li {
	  display: block;
	  background: indianred;
	  width: 200px;
	  height: 200px;
	  margin: .1em;
	  /* padding: 1em; */
	  color: white;
	  font-size: 2rem;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  align-self: stretch;
	  border: 1px solid azure;
	}
	
	li div {
	  display: inline-block;
	}

<div class="wrapper">

  <ul>

    <li>
      <div>
        First
      </div>
    </li>

    <li>
      <div>
        Second
      </div>
    </li>

    <li>
      <div>
        Third
      </div>
    </li>

    <li>
      <div>
        Fourth
      </div>
    </li>

    <li>
      <div>
        Fifth
      </div>
    </li>

  </ul>
</div>

我一直在努力让它像 Flexbox 那样工作，并且想知道这是否是我需要使用 CSS Grid 的情况。

可以在下图中看到所需的行为。考虑所需行为的另一种方法是justify-content: flex-start，但整个事情（从最左侧列表项的左边缘到最右侧列表项的右边缘）居中。

如果这不能用 Flexbox 来实现，那么 CSS 网格是要走的路吗？还是可以用不同的方式达到同样的效果？

Answer 1

除了li 元素之外，您要做的是将justify-content: center 和align-items: center 添加到ul。这可以在下面看到，this updated fiddle。

html {
  box-sizing: border-box;
}

p {
  padding: 1em;
}

.wrapper {
  width: 100%;
  min-height: 500px;
  padding: 2em 0;
  background: papayawhip;
  border: 1px solid orange;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  background: mistyrose;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 1em;
  border: 1px solid blue;
  padding: 0;
}

li {
  display: block;
  background: indianred;
  width: 200px;
  height: 200px;
  margin: .1em;
  /* padding: 1em; */
  color: white;
  font-size: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border: 1px solid azure;
}

li div {
  display: inline-block;
}


/* li:first-child {
	padding: 	
} */

<div class="intro">
  <p>
    My aim is to horizontally center the variable number of red boxes in the display within the following constraints:
    <br/> 1. RedBox width stays the same.
    <br /> 2. All boxes should be aligned, like a grid.
    <br /> 3. Each row of the boxes should have same starting point (as a result of 2)
    <br/>

    <em>Like shown here: <a href="">Desired Behavior</a> :: So can this be solved via Flexbox or do I need CSS Grid?</em>

  </p>
</div>

<div class="wrapper">

  <ul>

    <li>
      <div>
        First
      </div>
    </li>

    <li>
      <div>
        Second
      </div>
    </li>

    <li>
      <div>
        Third
      </div>
    </li>

    <li>
      <div>
        Fourth
      </div>
    </li>

    <li>
      <div>
        Fifth
      </div>
    </li>

  </ul>
</div>

希望这会有所帮助！ :)