在这种情况下，如何在图像上居中显示多行文字？

Question

我有一张占据整个屏幕的图像。现在我希望将文本置于其中心。我正在使用的方法非常适用于单行文本，但是当我有两行时，它将最长行居中并将所有其他行对齐到最长行的左侧。我如何让所有这些都集中在一起？

这是我用来将文字置于图像中心的课程：

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 1

添加text-align:center;

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

在https://codepen.io/gpetrioli/pen/eeoKyo

更新了演示

Answer 2

如果在<p>块中添加每一行的测试对您来说更容易，并且允许您将内容置于中心而不会出现问题 例如

＆＃13;

＆＃13;

.centered {
  position: absolute;
  display:block;
  width:100%;
  text-align:center;
  
}

＆＃13;

<h1 class="centered">
    <p>lorem ipsun</p>
    <p>holamigo</p>
  </h1>

＆＃13;

＆＃13;

＆＃13;