Javascript 在绝对定位的div中居中动态文本，动态宽度在DOM流之外

我有两个段落需要定位，以便它们符合这些标准：

两个段落必须在同一高度的容器中居中，即使其中一个或两个段落占用多行。这实际上与段落重叠。 段落容器必须位于页面中心，且最大宽度小于页面宽度的100%。 如果页面大小调整或段落内容更改，则这些条件必须保持为真。 我知道有很多事情需要跟踪，所以我做了一个简单的解释并演示了需要什么

有趣的是，JSFIDLE似乎正确居中，但只有当文本占据多行时

StackOverflow不允许我在没有代码的情况下发布问题，因此这里有一些代码：

<div id="container">
  <p id="p1"></p>
  <p id="p2"></p>
</div>

---

注意：我在标题中提到“在DOM流之外”的原因是，至少第二段需要在DOM流之外，否则它不能位于第一段的顶部。

您可以通过css flex属性这样做

容器{ 显示：flex；/*子对象的等高*/ } 容器>p{ 弯曲：1；/*此外，宽度相等*/ 文本对齐：居中； 填充：1em； 边框：实心； 背景颜色：ff0000 } Lorem ipsum dolor sit amet，奉献精英

Lorem ipsum dolor sit amet，奉献精英。所有人都可以通过以下方式获得经验，即动物健康状况减去身体健康状况下的相似债务。Lorem ipsum dolor sit amet，奉献精英。所有人都可以在身体健康的情况下，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发，从身体健康的角度出发

试试这个：

函数randomNumberlow，high{return Math.floorMath.random*高+低；} 函数生成内容长度{ var语句=； var计数=0； var wordLength=randomNumber1，10； 对于i=0；i

---

我能够通过将段落包装在一个非静态放置的容器中来实现这一点

然后绝对定位段落，并将其宽度设置为容器宽度的100%。现在使用文本对齐：居中；将文本置于容器的中心，您可以将容器放置在页面的任何位置，并将其缩放到任意大小。段落将调整大小以适应容器，它们将保持居中且保持相同高度

HTML

---

段落仍然一个接一个，没有重叠：段落并排，没有重叠：

<div id="container">
  <div id="p1"></div>
  <div id="p2"></div>
</div>

#container {
  position: relative;
  width: 70%;
  left: 15%;
}

#container div {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1em;
  border: solid;
}