title: Angular Material how to align layout center
body: <p>I have this straight out of angular material website, because im having a lot of trouble with angular material flex layout.</p>
  
  <p>According to the doc about <a href="https://material.angularjs.org/latest/layout/container" rel="nofollow noreferrer">layout container</a>
  Items arranged in a row. max-height = 100% and max-width is the width of the items in the container.</p>
  
  <p>I tried the example provide at the doc <a href="https://material.angularjs.org/latest/layout/alignment" rel="nofollow noreferrer">page</a></p>
  
  <pre><code>    &lt;div ng-app="myapp" ng-cloak&gt;
  
  &lt;div layout="row" layout-align="center center"&gt;
    &lt;div&gt;one&lt;/div&gt;
    &lt;div&gt;two&lt;/div&gt;
    &lt;div&gt;three&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>my content is suppose to align vertically and horizontally at the center. but instead my content is aligning horizontally but not vertically.</p>
  
  <p>I have the code example <a href="http://codepen.io/candoa/pen/ggPoKe?editors=1010#0" rel="nofollow noreferrer">here</a></p>