当前位置：首页 > VUE

vue实现居中显示

2026-02-21 07:45:53VUE

水平居中

使用 text-align: center 可以让内联元素或文本在父容器中水平居中。适用于 span、a 等内联元素。

<div class="parent">
  <span class="child">居中文本</span>
</div>

.parent {
  text-align: center;
}

块级元素水平居中

块级元素如 div 可以使用 margin: 0 auto 实现水平居中。需要设置宽度。

<div class="box"></div>

.box {
  width: 200px;
  margin: 0 auto;
}

Flexbox 水平居中

Flexbox 提供更灵活的居中方式。设置 display: flex 和 justify-content: center。

vue实现居中显示

<div class="flex-parent">
  <div class="flex-child"></div>
</div>

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

垂直居中

使用 line-height 实现单行文本垂直居中。设置 line-height 等于容器高度。

<div class="vertical-center">
  垂直居中文本
</div>

.vertical-center {
  height: 100px;
  line-height: 100px;
}

Flexbox 垂直居中

Flexbox 的 align-items: center 可以实现垂直居中。

vue实现居中显示

<div class="flex-vertical-parent">
  <div class="flex-vertical-child"></div>
</div>

.flex-vertical-parent {
  display: flex;
  align-items: center;
  height: 200px;
}

绝对定位居中

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

<div class="absolute-parent">
  <div class="absolute-child"></div>
</div>

.absolute-parent {
  position: relative;
  height: 300px;
}
.absolute-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Grid 居中

CSS Grid 的 place-items: center 可以同时实现水平和垂直居中。

<div class="grid-parent">
  <div class="grid-child"></div>
</div>

.grid-parent {
  display: grid;
  place-items: center;
  height: 300px;
}

Vue 动态居中

在 Vue 中结合动态样式或类名实现居中效果。

<template>
  <div :class="{ 'text-center': isCentered }">
    动态居中文本
  </div>
</template>

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

<style>
.text-center {
  text-align: center;
}
</style>

标签: vue