flex布局下图片设置margin:0 auto无法居中的解决方法

margin: 0 auto 实现水平居中需满足两个前提：作用元素为块级元素、元素设置了明确宽度。代码中的<img>默认属于行内替换元素，不满足块级元素要求，因此居中规则不生效。
当前设备宽度1271px场景下，box1、box2通过flex:1 1 100%平分父容器剩余宽度，box2可用宽度远大于图片200px的固定尺寸，不存在宽度不足导致的布局异常，以下方案均可实现图片水平居中：

• 方案1：修改图片显示属性，复用原有margin规则
  给图片追加display: block将其转为块级元素，原有margin: 0 auto即可自动分配左右剩余空间完成居中：

  img{
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  

• 方案2：将.box2设为Flex容器控制对齐
  不需要修改图片样式，仅给.box2添加Flex布局属性，通过主轴对齐规则实现内部内容居中，如需同时实现垂直居中可追加align-items: center：

  .box2{
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
  }
  

• 方案3：通过文本对齐属性实现居中
  利用行内元素可被父级文本对齐规则控制的特性，给.box2设置text-align: center即可，该方案兼容性覆盖所有主流浏览器：

  .box2{
    flex: 1 1 100%;
    text-align: center;
  }
  

• 方案4：使用Grid布局控制子元素位置
  将.box2设为Grid容器，通过主轴对齐属性实现居中，代码写法简洁：

  .box2{
    flex: 1 1 100%;
    display: grid;
    justify-content: center;
  }
  

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