vue中 怎么让一个div盒子 在他的父盒子中 居中 代码实现

在 Vue 中，如果你想让一个 `<div>` 宽度固定的盒子在其父盒子中水平垂直居中，你可以使用 Flexbox 或 Grid 布局。以下是两种常见的方法：

### 方法一：Flexbox 居中

首先确保父容器有 `display: flex` 和 `justify-content: center; align-items: center;` 样式。

<template>
  <div class="parent-container">
    <div class="child-div">
      <!-- 内容 -->
    </div>
  </div>
</template>

<style>
.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 父容器高度自适应，若固定高度则删去 */
}

.child-div {
  width: 200px; /* 子容器宽度，根据实际需求设置 */
}
</style>

### 方法二：CSS Grid 居中

如果父容器支持 CSS Grid，则可以使用 `grid-template-columns` 和 `align-self`。

<template>
  <div class="parent-container grid-container">
    <div class="child-div">
      <!-- 内容 -->
    </div>
  </div>
</template>

<style>
.parent-container.grid-container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
  height: 100%; /* 同上 */
}

.child-div {
  width: 200px;
}
</style>

这两种方法都可以保证 `<div>` 在其父容器内居中对齐。