Center flex items in a container when surrounded by other flex items
<p>I have a flexbox (see code snippet below as an example). </p>
<p>I want to set it up so that in all cases, <code><h2></code> is in the center of the <strong>flex-box</strong> and the other spans will flow around it, Based on their markup. </p>
<p>I'm basically looking for the <code>align-self</code> CSS code, but for the main axis, not the horizontal axis (which might help explain what I'm asking for). </p>
<p>I also applied <code>margin: auto;</code> to my <code><h2></code> which I learned after reading this article (a Great page, but it still leaves me with my following questions - except that I don't fully understand everything). </p>
<p>This is the code I get: </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>To restate my question completely: I want to know how to center <code><h2></code> on my page so that no matter what other<code><span></ where code>, <code><h2></code> will always be at the <strong>dead center</strong> of the flexbox. </p>
</blockquote>
<p>P.S.: I'm willing to use JavaScript and jQuery, but I prefer a pure CSS way of doing this. </p>
<hr/>
<p>After Michael Benjamin answered:</p>
<p>His answer made me think. While I haven't found a way to do this yet, I believe the following is a step in the right direction: </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>Basically, the theory is that while the total number of <code><span></code> is unknown, there are known to be three elements in total: <code><div><h2> < div></code></p>
<blockquote>
<p>As you can see in the code snippet above, I have tried (<code>flex: 0 0 auto</code> and <code>flex: 1 1 auto</code> etc.) to let It works but hasn't worked yet. Can anyone tell me if this is a step in the right direction and how to push this into an actual product? </p>
</blockquote></p>
