 <p>Elements lose their <em>flex item</em> status if they are absolutely positioned. In order to do what you're suggesting, you need to absolutely position the flex container:</p> <p><a href="http://codepen.io/cimmanon/pen/prFdm" rel="nofollow">http://codepen.io/cimmanon/pen/prFdm</a></p> <pre><code>.foo { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; -webkit-box-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bar { margin: auto; } &lt;div class="foo"&gt; &lt;div class="bar"&gt;Bar&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Note that I've omitted the moz 2009 Flexbox prefixes because absolute positioning breaks flex containers in Firefox. It should <em>just work</em> in Firefox versions with the standard Flexbox properties.</p>