不使用position定位实现div在图片上方居中的CSS方法

实现思路 #

不用absolute/relative定位完全可以实现需求，核心靠两个CSS特性就能搞定：

• Grid布局支持多个子元素放置在同一个网格单元，自动形成叠放效果，不需要脱离文档流
• Flex/Grid的直接子元素就算是默认的static定位，z-index属性依然生效，可以直接控制层叠顺序

具体修改代码 #

只需要调整CSS部分，HTML结构完全不用动：

.imgCon {
  /* 把原flex布局改成grid */
  display: grid;
  /* 网格内所有子项自动水平垂直居中 */
  place-items: center;
  width: 95%;
  height: 95%;
  margin: auto;
  background-color: blue;
}

.imgCon img {
  width: 95.5%;
  height: 95%;
  border-radius: inherit;
  /* 让图片占满整个父容器的网格区域 */
  grid-area: 1/1/-1/-1;
}

.iconCon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 30%;
  color: #ffffff;
  border-radius: 50%;
  background-color: #000000;
  /* 层级高于图片，显示在上层 */
  z-index: 1;
  /* 和图片放在同一个网格 网格区域，形成叠放 */
  grid-area: 1/1/-1/-1;
}

对应的HTML保持原有结构即可：

<div class="imgCon">
  <div class="iconCon">
    C
  </div>
  <img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>

效果说明 #

改完之后黑色圆形的iconCon会直接叠在图片上方，自动水平垂直居中，全程没有给任何元素设置absolute或者relative定位，完全符合需求。

注意：去掉两个子元素原有代码里的margin: auto，父容器的place-items: center已经统一处理了居中逻辑，额外加margin反而可能造成位置偏移。

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