如何用纯CSS实现文本环绕居中于父元素内的div？

要实现文本整齐环绕居中红色盒子的效果，同时支持指定元素精确尺寸，最简的纯CSS方案可以利用浮动占位元素配合自动外边距来实现，既避免单纯float左右的局限，也解决了背景居中无法让文本环绕的问题。

HTML结构 #

<div class="container">
  <div class="placeholder placeholder-left"></div>
  <div class="placeholder placeholder-right"></div>
  <div class="center-box">红色盒子</div>
  <p>这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容，这里是需要环绕的文本内容。</p>
</div>

CSS样式 #

.container {
  width: 100%; /* 可按需调整容器宽度 */
  max-width: 800px;
  margin: 0 auto;
}

.placeholder {
  width: calc(50% - 150px); /* 50%减去红色盒子宽度的一半，实现居中 */
  height: 200px; /* 与红色盒子高度一致，保证文本环绕范围正确 */
  float: left;
}

.placeholder-right {
  float: right;
}

.center-box {
  width: 300px; /* 指定红色盒子精确宽度 */
  height: 200px; /* 指定红色盒子精确高度 */
  background-color: red;
  margin: 0 auto;
}

p {
  text-align: justify; /* 让文本两端对齐，环绕效果更整齐 */
}

方案细节说明 #

• 两个.placeholder元素分别左右浮动，宽度通过calc计算为容器一半减去红色盒子宽度的一半，刚好将红色盒子固定在容器居中位置。
• 占位元素的高度与红色盒子保持一致，确保文本能在垂直方向完整环绕红色盒子。
• 红色盒子通过margin: 0 auto实现居中，同时支持直接指定width和height来设置精确尺寸。
• 文本部分设置text-align: justify可让环绕的文本更整齐，也可根据需求调整为其他对齐方式。

内容的提问来源于stack exchange，提问作者Захар Joe