如何实现元素环绕居中图片的布局效果？

要实现图片在容器中水平垂直居中，同时让按钮环绕它，可以借助CSS的shape-outside属性结合定位来完成，以下是具体实现代码：

HTML结构 #

<div class="container">
  <img src="你的图片路径" alt="居中展示的图片" class="center-img">
  <button class="wrap-btn">按钮1</button>
  <button class="wrap-btn">按钮2</button>
  <button class="wrap-btn">按钮3</button>
  <button class="wrap-btn">按钮4</button>
  <button class="wrap-btn">按钮5</button>
  <button class="wrap-btn">按钮6</button>
  <button class="wrap-btn">按钮7</button>
  <button class="wrap-btn">按钮8</button>
</div>

CSS样式 #

.container {
  width: 400px; /* 按需调整容器宽度 */
  height: 400px; /* 按需调整容器高度 */
  position: relative;
  padding: 10px;
  text-align: justify; /* 让按钮均匀分布 */
}

.center-img {
  width: 120px; /* 按需设置图片尺寸 */
  height: 120px;
  /* 实现图片水平垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 定义按钮可环绕的区域，圆形适配圆形图片，矩形可改用inset/rect */
  shape-outside: circle(50% at 50% 50%);
  float: left; /* 必须配合float才能让shape-outside生效 */
}

.wrap-btn {
  margin: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  /* 可选：让按钮换行时更自然 */
  display: inline-block;
}

原理说明 #

1. 图片通过position: absolute+transform: translate(-50%, -50%)实现绝对居中；
2. shape-outside属性定义了按钮可以环绕的区域，这里用circle()适配圆形图片，如果是矩形图片，可改为inset(0 0 0 0)（矩形）或inset(0 0 0 0 round 8px)（圆角矩形）；
3. 配合float: left触发按钮的环绕布局，容器的text-align: justify能让按钮在环绕时分布更均匀。

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