当前位置：首页 > VUE

vue实现垂直居中

2026-03-09 05:55:57VUE

使用 Flexbox 布局实现垂直居中

Flexbox 是 Vue 中实现垂直居中最常用的方法。通过设置父容器的 display: flex 和 align-items: center，可以轻松实现子元素的垂直居中。

<template>
  <div class="parent">
    <div class="child">垂直居中内容</div>
  </div>
</template>

<style>
.parent {
  display: flex;
  align-items: center;
  height: 300px; /* 需要指定高度 */
}
</style>

使用 Grid 布局实现垂直居中

CSS Grid 布局同样可以实现垂直居中效果。通过设置父容器为 display: grid 并使用 place-items: center，可以同时实现水平和垂直居中。

<template>
  <div class="parent">
    <div class="child">垂直居中内容</div>
  </div>
</template>

<style>
.parent {
  display: grid;
  place-items: center;
  height: 300px;
}
</style>

使用绝对定位和 transform 实现垂直居中

对于需要绝对定位的元素，可以使用 top: 50% 结合 transform: translateY(-50%) 实现垂直居中。

vue实现垂直居中

<template>
  <div class="parent">
    <div class="child">垂直居中内容</div>
  </div>
</template>

<style>
.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

使用表格布局实现垂直居中

通过设置父容器为 display: table，子元素为 display: table-cell 和 vertical-align: middle，可以实现传统表格方式的垂直居中。

<template>
  <div class="parent">
    <div class="child">垂直居中内容</div>
  </div>
</template>

<style>
.parent {
  display: table;
  height: 300px;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
}
</style>

使用 line-height 实现单行文本垂直居中

对于单行文本内容，可以设置 line-height 等于容器高度来实现简单的垂直居中效果。

vue实现垂直居中

<template>
  <div class="parent">
    <div class="child">单行文本垂直居中</div>
  </div>
</template>

<style>
.parent {
  height: 100px;
}
.child {
  line-height: 100px;
}
</style>

使用 CSS 变量实现动态垂直居中

在 Vue 中可以利用 CSS 变量实现动态高度的垂直居中，特别适合响应式布局场景。

<template>
  <div class="parent" :style="{'--height': containerHeight + 'px'}">
    <div class="child">动态高度垂直居中</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerHeight: 200
    }
  }
}
</script>

<style>
.parent {
  height: var(--height);
  display: flex;
  align-items: center;
}
</style>

使用 margin: auto 实现垂直居中

在 Flexbox 布局中，可以为子元素设置 margin: auto 来实现更灵活的居中控制。

<template>
  <div class="parent">
    <div class="child">margin auto 垂直居中</div>
  </div>
</template>

<style>
.parent {
  display: flex;
  height: 300px;
}
.child {
  margin: auto;
}
</style>

每种方法都有其适用场景，可以根据具体需求选择最合适的垂直居中实现方式。Flexbox 和 Grid 是现代布局中最推荐使用的方法，它们提供了简洁的语法和良好的浏览器支持。

标签: vue