当前位置：首页 > VUE

vue实现居中显示

2026-01-20 15:55:33VUE

实现水平居中

使用 flex 布局可以轻松实现水平居中。在父容器上设置 display: flex 和 justify-content: center。

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

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

实现垂直居中

在父容器上设置 align-items: center 可以实现垂直居中。

.parent {
  display: flex;
  align-items: center;
  height: 100vh; /* 确保父容器有高度 */
}

实现水平和垂直居中

结合 justify-content 和 align-items 可以实现水平和垂直居中。

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

使用 CSS Grid 实现居中

使用 CSS Grid 也可以实现居中效果。在父容器上设置 display: grid 和 place-items: center。

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

使用绝对定位实现居中

通过绝对定位和 transform 属性可以实现居中效果。

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在 Vue 组件中应用

在 Vue 的单文件组件中，可以直接在 <style> 标签中编写 CSS。

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

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

动态居中

如果需要根据条件动态调整居中样式，可以使用 Vue 的动态类绑定。

<template>
  <div :class="{ 'parent': isCentered }">
    <div class="child">居中内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCentered: true
    };
  }
};
</script>

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

vue实现居中显示