다른 Flex 항목이 포함된 컨테이너의 Flex 항목을 중앙에 어떻게 배치할 수 있나요?

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>