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

Question

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

我目前正在使用padding-top: 40vh来使文本大致居中，但这会在较小的视口中中断。我尝试做padding-top: 50vh并做一个变换translate(-50%)，但这不起作用。我也尝试过表格，伸缩和网格布局没有成功。此外，我尝试了文本的绝对定位，这显然会破坏包装，因为从流中删除了文本。使用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，这在将来的CSS形状级别中是可能的。同时，我们必须使用JavaScript。