Centering text vertically and horizontally in a flex item
<p>I was trying to follow along the flexbox example and my line-height is not working for this problem. </p>

<p>The text should be vertically centered, but it's not. It remains at the top only horizontally centered.</p>

<p>In the code snippet it seems to work fine but just to prove that this is acting strange I will give a picture of what I am seeing. </p>

<p>I tested this in both Chrome and IE but it's not vertically centering.</p>

<p>I did change the sizes in the snippet, but I don't think that'd do it.</p>

<p><a href="https://i.stack.imgur.com/GeD6n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GeD6n.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin-top: 10px line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="flex-container"&gt;
  &lt;li class="flex-item"&gt;1&lt;/li&gt;
  &lt;li class="flex-item"&gt;2&lt;/li&gt;
  &lt;li class="flex-item"&gt;3&lt;/li&gt;
  &lt;li class="flex-item"&gt;4&lt;/li&gt;
  &lt;li class="flex-item"&gt;5&lt;/li&gt;
  &lt;li class="flex-item"&gt;6&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>