vue3 div 居中

在 Vue.js 3 中，如果你想让一个 `div` 元素水平垂直居中，你可以使用 CSS 的 flexbox 或者 grid 布局。以下是两种常见的实现方法：

**方法一：Flexbox布局**

<template>
  <div class="container">
    <div class="centered-item">Hello, Centered!</div>
  </div>
</template>

<style scoped>
.container {
  display: flex; /* 设置主轴为flex */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.centered-item {
  /* 如果需要，可以添加其他样式 */
}
</style>

**方法二：Grid布局**

<template>
  <div class="container">
    <div class="centered-item">Hello, Centered!</div>
  </div>
</template>

<style scoped>
.container {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
}
.centered-item {
  /* 如果需要，可以添加其他样式 */
}
</style>

这两种方法都可以保证你的 `div` 元素在整个容器内居中显示。