CSS：flex元素容器的水平居中实现问题

嘿，我来帮你搞定这个小瓶颈～你遇到的问题核心在于**inline-flex元素的特性**：当你给元素设置display: inline-flex时，它就变成了行内级元素，而margin: 0 auto这个属性只对块级（block）元素生效，行内元素的水平对齐逻辑和块级完全不同，所以你加了margin: 0 auto也没效果。

下面给你两种靠谱的解决方案，按需选择：

方案一：利用父元素的text-align（保持inline-flex不变） #

既然.con是行内级元素，那我们可以通过父元素的text-align来控制它的水平位置，只需要给.page加一行代码：

.page{ 
  border: 1px solid red; 
  text-align: center; /* 新增：让行内子元素居中 */
}
.con{ 
  border: 2px solid green; 
  display: inline-flex; 
  /* 这里的text-align:center可以删掉，flex子元素的对齐用justify-content */
  /* margin: 0 auto; 这行也可以删掉，对行内元素无效 */
}
.con > div{ 
  background: red; 
  color: white; 
  height: 50px; 
  width: 50px; 
}

原理：行内级元素会继承父元素的text-align属性，父元素设为center后，行内的.con就会自动水平居中。

方案二：改成块级flex容器（用margin:auto实现） #

如果你更习惯用margin: 0 auto的方式，那可以把.con的display改成flex（块级flex容器），再配合宽度设置让它居中：

.page{ 
  border: 1px solid red; 
}
.con{ 
  border: 2px solid green; 
  display: flex; /* 改成块级flex容器 */
  margin: 0 auto; /* 现在这个属性生效了 */
  width: fit-content; /* 让容器宽度刚好包裹子元素，避免撑满父容器 */
  /* 要是想让子元素在.con里面居中，可以加 justify-content: center; */
}
.con > div{ 
  background: red; 
  color: white; 
  height: 50px; 
  width: 50px; 
}

原理：块级元素的margin: 0 auto会让它在父容器的可用空间里水平居中，width: fit-content是让.con的宽度适配内部子元素的总宽度，不然块级flex容器会默认占满父容器的宽度，就看不到居中效果了。

两种方案都能解决你的问题，看你更倾向哪种写法～

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