如何在环绕浮动元素的视口中垂直居中文本

Question

我在两个浮动元素之间有文本，文本环绕元素的形状在外面。我希望此文本在页面上垂直居中，但我尝试过的所有垂直居中选项都会导致换行中断。这是现在的样子：

我目前正在使用 padding-top: 40vh 使文本大致居中，但这会在较小的视口中中断。我试过 padding-top: 50vh 和转换 translate(-50%) 但这不起作用。我也尝试过 table、flex 和 grid 布局但没有成功。此外，我尝试了文本的绝对定位，这显然也打破了换行，因为文本从流中删除了。使用 JavaScript 动态设置 padding-top 是一种选择，但我更喜欢 CSS 解决方案。

最小示例

html, body {
  padding: 0;
  margin: 0;
}

#container {
  height: 100vh;
  width: 100vw;
  
  text-align: justify;
}

#left {
  float: left;
  width: 30vw;
  height: 100vh;
  
  background: red;
  opacity: 0.1;
  
  shape-outside: polygon(0 0, 30vw 0, 20vw 20vh, 20vw 80vh, 30vw 100vh, 0 100vh);
}

#right {
  float: right;
  width: 30vw;
  height: 100vh;
  
  background: green;
  opacity: 0.1;
  
  shape-outside: polygon(30vw 0, 0vw 0, 10vw 20vh, 10vw 80vh, 0vw 100vh, 30vw 100vh, 0 100vh);
}

#container p {
  margin: 0;
}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquam mattis sapien. Duis ut arcu sed nibh pretium ornare. Donec sed lacus viverra, pellentesque diam id, fringilla turpis. Donec egestas mauris libero, sit amet hendrerit nibh lobortis vel. Mauris sagittis elit libero, quis finibus arcu venenatis non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>

Answer 1

#text {
    padding-top: 0; // remove padding including the inline padding
    position: relative;
    top: 50%;
    transform: translatey(-50%);
    left: -6%;
}

Answer 2

似乎这在一般情况下仅用 CSS 是不可能的，如果允许我们在非 shape-outside 上使用 shape-outside -浮动元素。与此同时，我们必须使用 JavaScript.

如何在环绕浮动元素的视口中垂直居中文本

How to vertically center text in viewport that's wrapping around floating elements

css

centering

最小示例