當被其他彈性項目包圍時，容器中的彈性項目居中
<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><span></code></ 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>
