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

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; 
}