为什么设置width和height调整尺寸后flex的justify-content居中失效？

首先要明确flex属性的作用范围：display: flex及配套的对齐属性是给容器元素设置的，仅控制容器内部子元素的对齐规则，不会影响容器本身在其父级中的位置。你遇到的“居中失效”通常对应两种场景：

• 场景一：你希望.testclass自身在父容器中居中
  你未设置宽高时，.testclass作为块级元素默认宽度100%撑满父容器，视觉上没有对齐偏差；设置固定200px宽高后，块级元素默认左对齐，自然就出现了不居中的表现，本质是你把flex属性写在了要居中的元素本身，而非它的父容器上。
• 场景二：你希望.testclass的内部子元素在容器内居中
  flex默认主轴为水平方向，justify-content: center仅控制子元素的水平居中。你未设置高度时，容器高度由子元素撑开，垂直方向没有对齐空间，看不出问题；设置200px固定高度后，子元素默认在垂直方向顶部对齐，就会出现看起来“居中失效”的情况。

• 针对.testclass自身需要居中的场景：
  方法1：给.testclass的父元素添加flex对齐规则

  .testclass的父元素选择器 {
    display: flex;
    justify-content: center;
    /* 需要垂直居中再加 align-items: center; */
  }
  

  方法2：不需要修改父元素时，直接给.testclass添加margin: 0 auto即可实现水平居中。
• 针对.testclass内部子元素需要居中的场景：
  给.testclass补充垂直方向的对齐属性即可：

  .testclass {
    display: flex;
    justify-content: center;
    align-items: center; /* 控制垂直方向居中 */
    width: 200px;
    height: 200px;
  }
  

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