当被其他弹性项目包围时，容器中的弹性项目居中
<p>我有一个弹性盒（请参阅下面的代码片段作为示例）。</p>
<p>我想设置它，以便在所有情况下， <code><h2></code> 位于 <strong>flex-box</strong> 的中心，其他跨度将围绕它流动，基于他们的标记。</p>
<p>我基本上是在寻找 <code>align-self</code> CSS 代码，但是是针对主轴，而不是横轴（这可能有助于解释我的要求）。</p>
<p>我还将 <code>margin: auto;</code> 应用于我的 <code><h2></code>，这是我在阅读本文后了解到的（一个很棒的页面，但它仍然让我留下了我的以下问题 - 除非我没有完全理解所有内容）。</p>
<p>这是我得到的代码：</p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
h2 {
margin: auto;
]</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</p>
<blockquote>
<p>要完全重申我的问题：我想知道如何将 <code><h2></code> 在我的页面上居中，以便无论其他 <code><span></code> 在哪里， <code><h2></code> 将始终位于弹性框的<strong>死点</strong>中心。</p>
</blockquote>
<p>P.S.：我愿意使用 JavaScript 和 jQuery，但我更喜欢使用纯 CSS 方式来实现这一点。</p>
<hr/>
<p>迈克尔·本杰明回答后：</p>
<p>他的回答让我思考。虽然我还没有找到一种方法来做到这一点，但我相信以下是朝着正确方向迈出的一步：</p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false;">.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}</pre>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
</div>
<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>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 3</span>
</div>
</div></code></pre>
</p>
<p>基本上，理论是，虽然 <code><span></code> 的总数未知，但已知总共有三个元素：<code><div><h2> <div></code></p>
<blockquote>
<p>正如您在上面的代码片段中看到的，我尝试过（<code>flex: 0 0 auto</code>和<code>flex: 1 1 auto</code>等）让它工作但还没有成功。谁能告诉我这是否是朝着正确方向迈出的一步，以及如何将其推向实际产品？</p>
</blockquote></p>
