使用shape-outside时如何实现div垂直居中？

嗨，我完全懂你现在的纠结——想让文字顺着图片轮廓优雅环绕，同时还要把整个内容块垂直居中，但float和flex/grid好像天生犯冲，试了好几种方法要么破坏文字环绕，要么居中失效，确实挺闹心的！

其实问题的核心在于：你不需要放弃flex/grid来实现居中，只要把居中的对象换成包含浮动元素的BFC容器就行，而不是直接在浮动元素的父级用flex/grid。具体来说，可以这么调整：

解决思路 #

给外层容器设置flex/grid来实现整体垂直居中，然后让内部包含图片和文字的容器用flow-root创建BFC（这样能包裹住浮动的图片，避免布局混乱），内部的图片保持float和shape-outside设置，文字自然就能绕图，同时整个内容块也能完美居中。

修改后的代码 #

.shape-outside {
  shape-outside: url(https://9gdz2scbii.ufs.sh/f/zWQ2Yd3CAlqfqpqn7xOJVXdr2TwsUaM9xB8kENtWjbYcPCoz);
  shape-margin: 25px;
}

.wrapper {
  min-height: 100vh; /* 让容器占满视口高度，才能实现垂直居中 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，可根据需求调整 */
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="wrapper">
  <section class="relative flow-root w-3/4 border border-red-500">
    
    <img class="shape-outside w-[70%] float-right" src="https://9gdz2scbii.ufs.sh/f/zWQ2Yd3CAlqfqpqn7xOJVXdr2TwsUaM9xB8kENtWjbYcPCoz" alt="">
    
    <div class="relative border ">a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
    </div>

  </section>
</div>

为什么之前的方法不行？ #

你试的top: 50% + translateY(-50%)失效，是因为shape-outside的路径是基于元素的原始布局位置计算的，transform只是改变了元素的视觉位置，并没有改变它在文档流中的占位，所以文字环绕的路径还是停留在原来的地方，自然就错位了。

而用外层flex居中的方式，是把整个包含浮动元素的BFC容器作为一个整体来居中，容器内部的浮动布局和shape-outside完全不受影响，完美解决了两者的冲突。

效果对比 #

你想要的目标效果：

调整后就能接近这个效果啦，替换代码试试吧！

备注：内容来源于stack exchange，提问作者NickW