如果发生换行如何使文本垂直居中

Question

基本上我的问题是关于容器内的文本。当屏幕尺寸变小时，它会中断到下一行。此时，它不再垂直居中，因为出现了一条新线。

如何保持垂直居中？

<div class="low">
  <h4 class="title"> Text to be centered. </h4>
</div>

我通常会调整每个换行符的填充，但这既麻烦又耗时。一定有更好的方法。

Answer 1

你必须使用

display: flex;

使其垂直居中：

.low {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center; 
}

Answer 2

您可以将

text-align

属性设置为

center

。但是，如果容器的宽度使其内容无法居中对齐，则会失败。

.low {
  width: 50px;
}

.title {
  text-align: center;
}

<div class="low">
  <h4 class="title"> Text to be centered. </h4>
</div>

Answer 3

试试这个

div {
  display: table;
  background-color: #ccc;
  height: 50px;
}

h4 {
  display: table-cell;
  vertical-align: middle;
}

<div class="low">
  <h4 class="title"> Text to be centered. </h4>
</div>