Flex容器内固定px宽度元素无法对齐的问题咨询

问题本质 #

.wrapper作为Flex容器，通过justify-content: space-around让.item均匀分布，但.item本身是普通块级元素，内部固定宽度的.item__inner默认左对齐，所以没法在.item里居中。

两种可行解决方案 #

方案一：将.item设为Flex容器 #

给.item添加Flex布局属性，利用Flex的对齐能力实现内部元素居中：

.wrapper {
 display: flex;
 justify-content: space-around;
}
.item {
  width: 20%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 可选：垂直居中 */
}
.item__inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}

这种方式优势在于可以同时控制水平和垂直方向的对齐，适配更多布局需求。

方案二：用margin实现水平居中 #

如果只需要水平居中，无需修改.item的布局，直接给.item__inner设置自动margin：

.item__inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  margin: 0 auto; /* 左右自动填充，实现水平居中 */
}

这种方式代码更简洁，适合仅需水平对齐的场景。

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