如何通过CSS（优先无JS）实现两个正方形div的特定居中布局

嘿，我来帮你搞定这个布局！完全可以靠纯CSS实现，根本不需要JS，下面给你两种实用的方案，完美适配你图里的两种页面尺寸场景（宽屏并排居中、窄屏上下堆叠居中）：

方案一：Flexbox布局（最推荐，兼容性好） #

这是最常用的实现方式，代码简洁还能自动适配页面宽度变化。

先写基础HTML结构：

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
</div>

然后是CSS：

/* 让容器占满整个页面，同时负责居中逻辑 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中所有子元素 */
  align-items: center; /* 垂直居中所有子元素 */
  gap: 20px; /* 两个正方形之间的间距，你可以改成自己需要的数值 */
  flex-wrap: wrap; /* 关键：页面宽度不够放下两个正方形+间距时，自动换行 */
}

/* 定义正方形样式 */
.square {
  width: 200px; /* 这里的200px就是你说的X，替换成你需要的固定尺寸即可 */
  height: 200px;
  background-color: #000; /* 对应你图里的黑色div框 */
}

方案逻辑： #

• flex-wrap: wrap是核心，当页面宽度小于「2*X + 间距」时，两个正方形会自动上下堆叠；宽度足够时就并排显示。
• justify-content和align-items不管是并排还是堆叠，都能让整体在页面里水平+垂直居中，完全匹配你图里的效果。

方案二：Grid布局（简洁直观） #

如果你更喜欢Grid的写法，也可以用这个方案，效果和上面完全一样：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center; /* 一步搞定整体水平+垂直居中 */
  gap: 20px; /* 同样是正方形之间的间距 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动判断列数：宽度够就2列，不够就1列 */
  justify-items: center;
}

.square {
  width: 200px;
  height: 200px;
  background-color: #000;
}

进阶：响应式正方形（随页面自动缩放） #

如果你想要正方形能随页面大小自动调整尺寸（而不是固定X），可以用aspect-ratio属性（现代浏览器都支持），比如：

.square {
  aspect-ratio: 1; /* 强制保持正方形比例，不用同时写宽高 */
  width: min(300px, 45vw); /* 最大300px，或者视口宽度的45%，取两者里更小的那个，避免溢出 */
  background-color: #000;
}

这样正方形会自动适配页面，宽屏时尽可能大但不超出，窄屏时也不会挤得变形。

全程不需要任何JS代码，纯CSS就能完美实现你要的布局效果~

备注：内容来源于stack exchange，提问作者BRO_Fedka