javascript - 在 DOM 流之外以动态宽度在绝对定位的 div 中居中动态文本

Question

我有两个段落需要定位以便它们满足这些标准:

• 两个段落必须在容器中以相同的高度居中，即使其中一个或两个占据多于一行。这实际上与段落重叠。
• 段落容器必须位于页面中央，并且最大宽度小于页面宽度的 100%。
• 如果页面大小发生变化或段落内容发生变化，这些条件必须保持为真。

我知道需要跟踪的内容很多，所以我制作了一个 JSFiddle解释和演示需要什么。

有趣的是，JSFiddle 似乎正确居中，但前提是文本超过一行......

StackOverflow 不允许我发布没有代码的问题，所以这里有一些代码:

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

注意:我之所以在标题中说“在 DOM 流之外”是因为至少第二段需要在 DOM 流之外，否则它不能位于第一段之上段。

Answer 1

你可以通过这样的 css flex 属性来做到这一点

#container {
  display: flex; /* equal height of the children */
}

#container > p {
  flex: 1; /* additionally, equal width */
  text-align:center;
  padding: 1em;
  border: solid;
  background-color:#ff0000
}

<div id="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam</p>
</div>