Centering div with flex
<p>So, I am using following css to align a div container in the center of the page</p>

<pre><code>&lt;div class="flex-container"&gt;
    &lt;div class="conatiner"&gt; 
       Something centered
    &lt;/div&gt;
&lt;/div&gt;   

.flex-container{
 text-align: center;
 display: flex;
 height: 100%;
 padding: 0;
 margin: 0;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}
  .conatiner{
  position: absolute;
  background-color: #fafafa;
  text-align: left;
}
</code></pre>

<p>Here is <a href="https://jsfiddle.net/3ouqgbs0/" rel="nofollow">JSfiddle</a>.</p>

<p>As you can see, the inner container starts from the width of 50% mark.</p>

<p>How do I change it so that the container (regardless of its width) is always centered of the page using flex?</p>

<p>Thanks</p>