title: Angular Material 2 - How to center align with reduced width
body: <p><strong>Here is my html</strong></p>
  
  <pre><code>&lt;md-tab-group&gt;
    &lt;md-tab&gt;
      &lt;template md-tab-label&gt;One&lt;/template&gt;
      &lt;template md-tab-content&gt;
        &lt;md-content class="md-padding"&gt;
          &lt;h1 class="md-display-2"&gt;Tab One&lt;/h1&gt;
        &lt;/md-content&gt;
      &lt;/template&gt;
    &lt;/md-tab&gt;
    &lt;md-tab&gt;
      &lt;template md-tab-label&gt;Two&lt;/template&gt;
      &lt;template md-tab-content&gt;
        &lt;md-content class="md-padding"&gt;
          &lt;h1 class="md-display-2"&gt;Tab Two&lt;/h1&gt;
        &lt;/md-content&gt;
      &lt;/template&gt;
    &lt;/md-tab&gt;
  &lt;/md-tab-group&gt;
  </code></pre>
  
  <p>This take full width on desktop and mobile,What changes are needed for the content to be rendered with 50% width in desktop and center aligned?</p>