vue3 子盒子水平垂直居中于父盒子

在Vue3中，实现子元素水平垂直居中于父元素，可以使用以下的CSS样式：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上样式将父元素设置为flex布局，使子元素水平和垂直方向上都可以居中对齐。其中，justify-content属性控制子元素水平方向上的居中对齐方式，align-items属性控制子元素垂直方向上的居中对齐方式。

另外，可以使用以下的Vue3代码示例来演示上述的CSS样式：

<template>
  <div class="parent">
    <div class="child">这是子元素</div>
  </div>
</template>

<style>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: yellow;
  width: 200px;
  height: 200px;
}
</style>

在上述示例中，父元素使用了CSS样式设置为flex布局，并且子元素也设置了一些基本的样式。这样，子元素就可以水平垂直居中于父元素了。

相关问题

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>` 在其父容器内居中对齐。