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

回到相关文章 »

效果:

anchor-center值实现

代码:

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" />