当被其他弹性项目包围时，容器中的弹性项目居中

Question

我有一个弹性盒（请参阅下面的代码片段作为示例）。

\n

我想设置它，以便在所有情况下，它都位于弹性盒<h2>的中心，其他跨度将根据它们的标记围绕它流动。

\n

我基本上是在寻找align-selfCSS 代码，但是是针对主轴，而不是横轴（这可能有助于解释我要问的内容）。

\n

我也在申请margin: auto;我的，这是我在阅读本文<h2>后了解到的（一个很棒的页面，但它仍然给我留下了以下问题\xe2\x80\x94除非我没有完全理解所有内容）。

\n

这是我得到的代码：

\n

\r\n

\r\n

.container {\n  align-items: center;\n  border: 1px solid red;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\nh2 {\n  margin: auto;\n]

\r\n

<div class="container">\n  <h2>I\'m an h2</h2>\n  <span>I\'m span 1</span>\n  <span>I\'m span 2</span>\n  <span>I\'m span 3</span>\n</div>\n<div class="container">\n  <span>I\'m span 1</span>\n  <span>I\'m span 2</span>\n  <span>I\'m span 3</span>\n  <h2>I\'m an h2</h2>\n  <span>I\'m span 4</span>\n  <span>I\'m span 5</span>\n  <span>I\'m span 6</span>\n</div>\n<div class="container">\n  <span>I\'m span 1</span>\n  <span>I\'m span 2</span>\n  <h2>I\'m an h2</h2>\n  <span>I\'m span 3</span>\n</div>

\r\n

\r\n

\r\n

\n

\n

充分重申我的问题：我想知道如何将 s<h2>在我的页面上居中，以便无论其他<span>s 在哪里， s<h2>总是位于弹性盒的正中心。

\n

\n

PS：我愿意使用 JavaScript 和 jQuery，但我更喜欢使用纯 CSS 方式来实现这一点。

\n

---

\n

在迈克尔·本杰明回答后：

\n

他的回答引起了我的思考。虽然我还没有找到一种方法来做到这一点，但我相信以下是朝着正确方向迈出的一步：

\n

超文本标记语言

\n

<div class="container">\n  <div>\n    <span>I\'m span 1</span>\n    <span>I\'m span 2</span>\n    <span>I\'m span 3</span>\n  </div>\n  <h2>I\'m an h2</h2>\n  <div>\n    <span>I\'m span 4</span>\n    <span>I\'m span 5</span>\n    <span>I\'m span 6</span>\n  </div>\n</div>\n

\n

CSS

\n

.container div {\n  flex: 1 1 auto;\n  text-align: center;\n}\nh2 {\n  flex: 0 0 auto;\n  margin: auto;\n}\n

\n

\r\n

\r\n

<div class="container">\n  <div>\n    <span>I\'m span 1</span>\n    <span>I\'m span 2</span>\n    <span>I\'m span 3</span>\n  </div>\n  <h2>I\'m an h2</h2>\n  <div>\n    <span>I\'m span 4</span>\n    <span>I\'m span 5</span>\n    <span>I\'m span 6</span>\n  </div>\n</div>\n

\r\n

.container div {\n  flex: 1 1 auto;\n  text-align: center;\n}\nh2 {\n  flex: 0 0 auto;\n  margin: auto;\n}\n

\r\n

\r\n

\r\n

\n

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

\n

\n

正如您在上面的代码片段中看到的，我已经尝试（flex: 0 0 auto和flex: 1 1 auto等）让它工作，但没有成功。谁能告诉我这是否是朝着正确方向迈出的一步，以及如何将其推向实际产品？

\n

\n

Answer 1

Flex 对齐属性通过分配容器中的可用空间来发挥作用。

因此，当一个 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>

请记住，将h2with 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>

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

基本上，该理论是，虽然总计 s 的数量<span>未知，但已知总共将包含三个元素：<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属性对齐。

更多信息和解决方案：

• 居中和右对齐 Flexbox 元素
• 当侧面项目具有不同宽度时，保持中间项目居中