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

【问题标题】：How to vertically center text in viewport that's wrapping around floating elements如何在围绕浮动元素的视口中垂直居中文本
【发布时间】：2019-08-17 20:50:07
【问题描述】：

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

我目前正在使用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>

【问题讨论】：

你能分享代码，我们也可以看到外面的形状吗？它会比你分享的代码更有帮助
我添加了它，虽然它不应该对实现产生影响，对吧？
它有很大的不同。如果没有外面的形状，你的问题是其他问题的重复。外面的形状使它与众不同。我们还需要问题中的代码而不是外部链接
我在 sn-p 中添加了 shape-outside，但我很好奇它会重复哪个问题。你能给我一个链接吗，因为我还没有找到一个关于垂直居中的问题，在浮动元素之间换行。
你没有 shape-outside 的代码是重复的，这就是我要求你添加 shape-outside 的原因

标签： css centering

【解决方案1】：

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

【讨论】：

【解决方案2】：

这似乎通常只用 CSS 是不可能的，如果它允许我们在非浮动元素上使用 shape-outside，这可能在未来的 CSS 形状级别中是可能的。与此同时，我们必须使用 JavaScript。

【讨论】：