CSS居中锚点定位效果实例页面

CSS代码：

.trigger {
  anchor-name: --anchor;  
}
.target {
  position: absolute;
  position-anchor: --anchor;
  left: anchor(center);
  top: anchor(bottom);
  transform: translate(-50%, 8px);
}

.trigger2 {
   anchor-name: --anchor2;  
}
.target2 {
  position: absolute;
  position-anchor: --anchor2;
  left: anchor(center);
  top: anchor(bottom);
  justify-self: anchor-center;
}

HTML代码：

<button class="trigger">我是按钮</button>
<img class="target" src="1.jpg" width="256" />

<button class="trigger2">我是按钮</button>
<img class="target2" src="1.jpg" width="256" />