当前位置：首页 > VUE

vue实现字体上下居中

2026-01-20 10:52:44VUE

使用 flex 布局实现字体上下居中

在 Vue 中，可以通过 flex 布局快速实现文本的垂直居中。将父元素设置为 display: flex 并配合 align-items: center 即可。

<template>
  <div class="flex-container">
    <p>垂直居中的文本</p>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  align-items: center;
  height: 200px; /* 需要设置高度 */
}
</style>

使用 grid 布局实现字体上下居中

Grid 布局同样可以实现垂直居中效果，使用 place-items: center 可以同时实现水平和垂直居中。

vue实现字体上下居中

<template>
  <div class="grid-container">
    <p>垂直居中的文本</p>
  </div>
</template>

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

使用 line-height 实现单行文本上下居中

对于单行文本，设置 line-height 与容器高度相同是最简单的方法。

vue实现字体上下居中

<template>
  <div class="line-height-container">
    <p>单行文本垂直居中</p>
  </div>
</template>

<style>
.line-height-container {
  height: 100px;
}
.line-height-container p {
  line-height: 100px;
}
</style>

使用 position 和 transform 实现多行文本上下居中

对于多行文本或不确定高度的元素，可以使用绝对定位结合 transform 实现垂直居中。

<template>
  <div class="position-container">
    <p>多行文本垂直居中<br>第二行文本</p>
  </div>
</template>

<style>
.position-container {
  position: relative;
  height: 200px;
}
.position-container p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

使用 table-cell 实现传统垂直居中

通过设置 display: table-cell 和 vertical-align: middle 也可以实现垂直居中。

<template>
  <div class="table-container">
    <p>使用table-cell实现的垂直居中</p>
  </div>
</template>

<style>
.table-container {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}
</style>

每种方法适用于不同场景，flex 和 grid 是现代布局的首选方案，line-height 适合简单单行文本，position 适合复杂布局，table-cell 则提供向后兼容的方案。