我想要文本垂直居中于 div，但文本内容会被修改，文字宽度超出 div 宽度换行展示，但文本依然要垂直居中
说道垂直居中，第一反应就是 line-height
文字居中

但当文本出现换行就会变成这个样子
文字换行后的 line-height 效果

─ 你觉不觉得他很丑，而且怪怪的？

─ 嗯，我也这样觉得

解决方案

通过 display: table-cell; 结合 vertical-align: middle; 来解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div class="banner">
    <h1 class="sidebar-title">test</h1>
  </div>
</template>

<style>
.banner {
  margin: 0 auto;
  display: table;
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
}

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

此时不管是多少行文字都是垂直居中于 div 的
文字居中展示

相关文档：https://www.cnblogs.com/cowboybusy/p/11459408.html