当前位置：首页 > VUE

vue实现垂直居中

2026-02-17 17:24:46VUE

使用 Flexbox 布局

在父容器上设置 display: flex 并配合 align-items: center 和 justify-content: center 实现垂直和水平居中。

<template>
  <div class="container">
    <div class="centered-element">居中内容</div>
  </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 确保容器有高度 */
}
.centered-element {
  /* 子元素样式 */
}
</style>

使用 Grid 布局

通过 CSS Grid 的 place-items: center 可以快速实现居中效果。

<template>
  <div class="grid-container">
    <div class="centered-element">居中内容</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
}
</style>

使用绝对定位和 transform

通过绝对定位将元素定位到父容器的 50% 位置，再通过 transform: translate(-50%, -50%) 调整自身位置。

<template>
  <div class="parent">
    <div class="centered-element">居中内容</div>
  </div>
</template>

<style>
.parent {
  position: relative;
  height: 100vh;
}
.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

使用表格布局

通过 display: table 和 display: table-cell 模拟表格的垂直居中特性。

<template>
  <div class="table-container">
    <div class="table-cell">
      <div class="centered-element">居中内容</div>
    </div>
  </div>
</template>

<style>
.table-container {
  display: table;
  width: 100%;
  height: 100vh;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>

动态计算居中（适用于需要响应式的情况）

通过 Vue 的计算属性或方法动态计算居中位置，适用于复杂场景。

<template>
  <div class="dynamic-container" ref="container">
    <div 
      class="centered-element" 
      :style="{ 
        marginTop: centeredMargin + 'px',
        marginLeft: centeredMargin + 'px' 
      }"
    >
      动态居中内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centeredMargin: 0
    };
  },
  mounted() {
    this.calculateCenter();
    window.addEventListener('resize', this.calculateCenter);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateCenter);
  },
  methods: {
    calculateCenter() {
      const containerHeight = this.$refs.container.clientHeight;
      const elementHeight = 100; // 假设子元素高度为 100px
      this.centeredMargin = (containerHeight - elementHeight) / 2;
    }
  }
};
</script>

<style>
.dynamic-container {
  height: 100vh;
  position: relative;
}
.centered-element {
  width: 200px;
  height: 100px;
  position: absolute;
}
</style>