Div嵌套无法居中：圆形数字元素在card组件内居中失败

问题根因 #

你当前的#inner容器已经通过margin: 0 auto实现了自身在父级的水平居中，但.numberCircle作为#inner的子元素是默认左对齐的块级元素，其120px的固定宽度远小于#inner的50%父级宽度，因此会在#inner容器内靠左展示，没有达到整体居中的效果。

解决方案 #

方案1（改动最小）

给.numberCircle添加左右自动边距，块级元素设置左右margin为auto时会自动在父容器内水平居中，无需修改HTML代码：

.numberCircle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* 新增该行代码即可 */
}

方案2（修改父容器属性）

给#inner设置flex布局，让所有子元素自动水平居中：

#inner {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 新增该行代码即可 */
}

两种方案任选其一都可以实现圆形数字元素的水平居中效果。

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