如何实现2×2排布div围绕父中心对齐 内侧角落汇聚于中心点

核心思路 #

利用CSS绝对定位+transform偏移实现，不需要依赖固定尺寸，子元素宽高动态变化时也能自动保持内角对齐父容器中心的效果：
父容器设置相对定位作为定位基准，四个子元素全部以父容器中心（left: 50%、top: 50%）为初始定位点，再通过transform偏移对应距离，让各自需要对齐的内角刚好落在中心点上。

完整代码示例 #

HTML结构 #

<div class="parent-container">
  <!-- 左上象限：右下角对齐中心 -->
  <div class="box box-tl"></div>
  <!-- 右上象限：左下角对齐中心 -->
  <div class="box box-tr"></div>
  <!-- 左下象限：右上角对齐中心 -->
  <div class="box box-bl"></div>
  <!-- 右下象限：左上角对齐中心 -->
  <div class="box box-br"></div>
</div>

CSS样式 #

/* 父容器基础样式，可根据业务自定义宽高 */
.parent-container {
  position: relative;
  width: 600px;
  height: 600px;
  border: 1px solid #ccc;
}
/* 子元素公共样式，宽高可任意动态修改 */
.box {
  position: absolute;
  box-sizing: border-box;
  /* 示例宽高，可任意替换 */
  width: 220px;
  height: 260px;
}
/* 左上象限盒子：右下角对齐中心 */
.box-tl {
  left: 50%;
  top: 50%;
  transform: translate(-100%, -100%);
  background: #ff9999;
}
/* 右上象限盒子：左下角对齐中心 */
.box-tr {
  left: 50%;
  top: 50%;
  transform: translate(0, -100%);
  background: #99ff99;
}
/* 左下象限盒子：右上角对齐中心 */
.box-bl {
  left: 50%;
  top: 50%;
  transform: translate(-100%, 0);
  background: #9999ff;
}
/* 右下象限盒子：左上角对齐中心 */
.box-br {
  left: 50%;
  top: 50%;
  transform: translate(0, 0);
  background: #ffff99;
}

特性说明 #

• 完全适配动态尺寸：四个子元素宽高可任意修改，无需调整定位代码即可自动保持对齐效果
• 复用性强：父容器仅需设置position: relative即可作为承载容器，可嵌入任意业务页面使用
• 兼容性好：所有属性兼容Chrome、Firefox、Safari等主流现代浏览器
• 如果子元素需要设置padding、border，只要保持box-sizing: border-box就不会出现定位偏移

小提示：如果需要在四个盒子之间预留中心空隙，可在transform的偏移值中叠加对应距离，比如需要10px空隙时，.box-tl的偏移修改为transform: translate(calc(-100% - 10px), calc(-100% - 10px))，其余盒子对应调整偏移方向即可。

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