Css md校准中心不'；我不能改变任何事

我正在使用VueJS和VueMatria.IO（注：我对这两个方面都是新手），并尝试创建一个简单的仪表板，如下所示：

<template>
  <div class="content">
    <div class="md-layout">
      <div class="md-layout-item md-alignment-center-center  md-size-33 md-medium-size-33 md-xsmall-size-100">
        <monitor-view :suppliers="suppliers" :products="products"></monitor-view>
      </div>
    </div>
  </div>
</template>

我已经尝试在

监视器视图中设置对齐方式（我认为这不是正确的选择），但仍然不起作用

有人知道这件事吗

<template>
  <div>
    <vue-ellipse-progress :progress="suppliersActivePercent":legend-value="suppliersActive" 
        line=round line-mode="in 2" color="#aaa" emptyColor="#ddd" fontSize=2em>
      <span slot="legend-value">/ {{ this.suppliers.length }}</span>
      <p slot="legend-caption">SUPPLIERS</p>
    </vue-ellipse-progress>
  </div>
</template>