Vuetify で Component の最大幅を指定した上で、その Component を水平（左右）中央に配置する

普通に scss を書いて当ててもいいのだが、 Vuetify の機能に頼って実現する場合、どうしたら良いかという備忘。

今回は v-card Component を前提とするが、他の Component でも応用は効くはず。

手順

最大幅を指定

v-card API に max-width という Props があるので、これに希望の最大幅を指定する。

<v-card
  max-width="800"
>

水平中央に配置

先述の指定のみの場合、その最大幅を上限として、「左寄せ」で配置されてしまう。

そこで spacing helper を用いて、 左右の padding を auto に指定する。
具体的には、左右中央 に 配置したい Component の class に mx-auto を付与する。

<v-card
  max-width="800"
  class="mx-auto"
>

余談

上記の記述によって実行されるのは、 一般的な css で 水平配置をする場合に用いる、

• style に margin-left: auto;margin-right: auto を適用する
• sthle に max-width: 800px; を適用する

と（おそらく）同じことなので、下記のように普通に scss を書いて当てても同じ結果が得られるはず。

<v-card
  class="centering"
>

.centering {
  margin-left: auto;margin-right: auto;
  max-width: 800;
}

複数の Component に一括で適用したい場合は、普通に css を当てるほうが便利かもしれない。