Flex对齐属性通过在容器中分配可用空间来工作。

因此，当一个弹性项目与其他项目共享空间时，没有单步方法将其居中， 除非两个兄弟姐妹的总长度相等 。

在您的第二个示例中，跨度的总长度在的两侧相等h2。结果，它们h2完美地位于容器的中心。

.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; }


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

只要记住，该中心h2与justify-content: center（或space-around或space- between），只能因为双方平等的平衡。两侧差异的每个像素都将h2产生相称的误差。

在您的第一个和最后一个示例中，双方之间显然存在不平衡。标准对齐属性（例如justify-content和）margin将不起作用，因为它们在
可用空间 而不是 总空间中 居中。

您可以在两侧插入重复的跨度，visibility: hidden以达到相等的平衡。但是，这会增加语义上毫无价值的元素，从而使您的标记变得肿。

相反，如果您有能力计算每个跨度的宽度，则可以插入伪元素以实现相等的平衡。

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  border: 1px solid red;

  margin: 5px;

  padding: 5px;

}

span {

  flex: 0 0 75px;

  border: 1px dashed black;

  box-sizing: border-box;

}

div.container:first-child::before {

  content: "";

  width: 225px;

}

.container:nth-child(2)::after {

 content: "";

  width: 75px;

}

p { text-align: center;}

p > span { background-color: aqua; padding: 5px; border: none; }


<div class="container">

  <h2>I'm an h2</h2>

  <span>I'm span 1</span>

  <span>I'm span 2</span>

  <span>I'm span 3</span>

</div>

<div class="container">

  <span>I'm span 1</span>

  <span>I'm span 2</span>

  <h2>I'm an h2</h2>

  <span>I'm span 3</span>

</div>

<p><span>TRUE CENTER</span></p>

最终，作为CSS的不得已而为之，您可以h2使用绝对定位来居中。这将从文档流中删除该元素，但始终使其始终完美地位于容器的中心。

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  border: 1px solid red;

  position: relative; /* NEW */

  height: 50px;

}

h2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  margin: 0;

}

.container:nth-child(1) { justify-content: flex-end; }

.container:nth-child(2) > span:nth-of-type(4) { margin-left: auto; }

.container:nth-child(3) > span:nth-of-type(2) { margin-right: auto; }



p { text-align: center;}

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


<div class="container">

  <h2>I'm an h2</h2>

  <span>I'm span 1</span>

  <span>I'm span 2</span>

  <span>I'm span 3</span>

</div>

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

<div class="container">

  <span>I'm span 1</span>

  <span>I'm span 2</span>

  <h2>I'm an h2</h2>

  <span>I'm span 3</span>

</div>

<p><span>TRUE CENTER</span></p>

更新 （基于修订后的问题）

基本上，理论是，虽然合计<span>s的数量未知，但已知总共会有三个元素：<div><h2><div>。

因此，如果我们知道总会有三个元素，那么就有一个使用flex属性的潜在解决方案。

.container {

  display: flex;

}

.container > * {

  flex: 1;  /* KEY RULE */

}

h2 {

  text-align: center;

  margin: 0;

}

.container > div {

  display: flex;

  justify-content: space-around;

}



/* non-essential decorative styles */

.container { background-color: lightgreen; border: 1px solid #ccc; padding: 5px; }

.container > * { border: 1px dashed red; }

p { text-align: center;}

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


<div class="container">

  <div>

    <span>I'm span 1</span>

    <span>I'm span 2</span>

    <span>I'm span 3</span>

  </div>

  <h2>I'm an h2</h2>

  <div>

    <span>I'm span 4</span>

    <span>I'm span 5</span>

    <span>I'm span 6</span>

  </div>

</div>

<p><span>TRUE CENTER</span></p>

这是正在发生的事情：

• 这三个元素是flex项目，因为它们的父项是flex容器
• 每个项目都有一个flex: 1，使它们在它们之间平均分配容器空间。最终结果是三个宽度相等的项目。
• 现在，将h2文本居中于h2元素中还将使文本居中于容器中。
• 可以将每个div做成一个嵌套的flex容器，并且可以将span与flex属性对齐。