Vue3 垂直居中内容 - Flexbox 布局实现

<template>
  <div class="container">
    <div class="centered">
      <!-- 内容 -->
    </div>
  </div>
</template>
<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置高度为视口高度 */
}

.centered {
  /* 可以添加其他样式 */
}
</style>
<p>在上面的示例中，<code>.container</code>是一个父容器，使用Flexbox布局，并通过<code>justify-content: center</code>将其子元素水平居中，<code>align-items: center</code>将其子元素垂直居中。<code>.centered</code>是子元素，你可以在其中添加你的内容，并根据需要进行样式设置。</p>
<p>另外，<code>height: 100vh</code>是为了将父容器的高度设置为视口的高度，这样可以确保内容在垂直方向上居中。</p>