如何沿浮动shape-outside多边形路径垂直居中文字？

我已经用带shape-outside和clip-path的浮动.cutout元素实现了文本沿路径换行，但想让这些文字在父容器高度内垂直居中。尝试过定位和边距技巧，但会破坏内联元素沿多边形路径的换行效果。请问有没有办法在.cutout的父容器高度内垂直对齐内联元素组，同时保留.innertext元素沿shape-outside多边形路径换行的能力？

原CSS代码 #

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.cutout {
  float: right;
  background-color: #faa;
  width: 80%;
  height: 100%;
  shape-outside: polygon(0 100%, 100% 0%, 100% 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}

.innertext {
  margin: auto;
}

原HTML代码 #

<div class="container">
  <div class="cutout">
  </div>
  
  <div class="innertext">
    <h1>
      Lorem Ipsum
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </p>
  </div>
</div>

可以通过给父容器添加Flexbox布局来实现需求，既保留文本沿多边形路径换行的效果，又能让内容在容器内垂直居中。

修改后的CSS代码 #

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中内部子元素 */
}

.cutout {
  float: right;
  background-color: #faa;
  width: 80%;
  height: 100%;
  shape-outside: polygon(0 100%, 100% 0%, 100% 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}

.innertext {
  flex: 1; /* 让文本容器占据剩余可用宽度 */
}

关键说明 #

• Flexbox的align-items: center属性会让.innertext在容器高度内垂直居中，且不会干扰.cutout的浮动和shape-outside路径换行逻辑。
• 给.innertext设置flex: 1，确保它能占据容器的剩余宽度，文本可以正常沿多边形边缘换行。
• 无需使用定位或复杂边距调整，避免破坏文本的自适应换行效果。

内容的提问来源于stack exchange，提问作者Christoffer Hallqvist