被其他d性物品包围时，将d性物品放在容器中

被其他d性物品包围时，将d性物品放在容器中

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

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

在您的第二个示例中，跨度的总长度在的两侧相等

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 >  <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 >  <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 >  <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;   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 >  <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 >  <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 >  <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;  }h2 {  text-align: center;  margin: 0;}.container > div {  display: flex;  justify-content: space-around;}.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 >  <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属性对齐。