angular-material: can't center md-checkbox inside div
<p>My task is to center an md-checkbox inside a div with flex.</p>

<p>I looked in the angular material website but still can't make it right.</p>

<pre><code>&lt;div class="main blue" layout="row" layout-align="start center"&gt;
   &lt;div class="container yellow" layout="row" layout-align="center center" flex="30"&gt;
      &lt;md-checkbox class="check"&gt;&lt;/md-checkbox&gt;
&lt;/div&gt;
&lt;div layout="row" layout-align="center center" flex="70"&gt;
      angular material
&lt;/div&gt;
</code></pre>

<p></p>

<p>Here is a <a href="http://plnkr.co/edit/1XzbxPeVwZCSGcxHHJxO?p=preview" rel="nofollow">plnkr</a></p>

<p>It is not perfectly in the center.</p>

<p>Is it because the md-chexbox has no label inside it?</p>

<p>what am i missing?</p>