如何在页面中垂直居中flex容器，保证内部圆形正常显示

解决方案 #

有两种常用的实现方式，都不会破坏你原有.circles容器的flex布局：

方案1（更推荐，无定位冲突） #

给页面根元素设置满屏高度 + flex全局居中，只需要新增如下CSS代码即可，原有代码不需要改动：

html, body {
  /* 让页面占满整个视口高度 */
  height: 100%;
  margin: 0;
  /* 开启flex布局，直接将子元素居中在页面正中央 */
  display: flex;
  justify-content: center;
  align-items: center;
}

这个方案不会对你的circles容器本身的flex属性产生任何影响，内部的四个圆形排列逻辑完全不变。

方案2（定位修正版） #

你之前的定位写法缺少水平居中设置和自身偏移修正，调整后也可以实现效果，给.circles容器追加如下样式即可：

.circles {
  /* 原有样式保留，新增以下代码 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 向左、向上偏移自身宽高的50%，刚好对齐页面中心 */
  transform: translate(-50%, -50%);
}

额外优化（可选） #

你当前的.circles宽度为500px，四个124px的圆形总宽度为496px，剩余4px的空隙会默认排在最后一个圆形右侧。如果需要让四个圆形在红色容器内均匀分布，可以给.circles追加justify-content: space-between属性。

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