Vue.js Vue类型的JS（Nuxt，Vuetify）。无法设置内容中心

我目前正在使用Nuxt和Vuetify构建一个PWA，我正在使用vue类型的js进行类型化动画

然而，我正在努力使键入的内容在中心得到证明

<template>
  <div>
    <div class="text-center justify-center d-flex flex-column min-vh-100">
      <h1>Hello!</h1>
      <vue-typed-js 
      :strings="['Im Barra, <b><span>UX Designer</span></b> and <b><span>Researcher</span></b> &#128075;']" 
      :showCursor="false" 
      :typeSpeed="75">
        <p class="typing"></p>
      </vue-typed-js>
      <transition name="scroll" appear>
        <div class="scrolldown-wrapper" v-if="show">
          <div class="scrolldown">
            <svg height="30" width="10">
              <circle class="scrolldown-p1" cx="5" cy="15" r="2" />
              <circle class="scrolldown-p2" cx="5" cy="15" r="2" />
            </svg>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

你好

我的H1标记正确对齐，但vue类型的js内容仍然对齐到页面左侧

我附上了一个屏幕截图，显示了它是如何显示的。如果我从浏览器css中禁用“display:flex”道具，我会得到想要的结果。但是，我不知道如何在我的nuxt应用程序中实际覆盖它

有没有关于如何将这些内容集中的想法

---

谢谢

您可以将v-row与justify=“center”和align=“center”一起使用：

你好

非常简单（facepalm）…谢谢David！封锁让我似乎错过了最基本的东西。感谢您的回复。B

<template>
  <div>
    <div class="text-center justify-center d-flex flex-column min-vh-100">
      <h1>Hello!</h1>
      <v-row align="center" justify="center">
        <vue-typed-js 
        :strings="['Im Barra, <b><span>UX Designer</span></b> and <b><span>Researcher</span></b> &#128075;']" 
        :showCursor="false" 
        :typeSpeed="75">
          <p class="typing"></p>
        </vue-typed-js>
      </v-row>
      <transition name="scroll" appear>
        <div class="scrolldown-wrapper" v-if="show">
          <div class="scrolldown">
            <svg height="30" width="10">
              <circle class="scrolldown-p1" cx="5" cy="15" r="2" />
              <circle class="scrolldown-p2" cx="5" cy="15" r="2" />
            </svg>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>