[笔记] flex+absolute 在chrome和safar

  <style>
   *{margin: 0;padding: 0;}

   .flex-box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }
    .box{
      flex: 0 0 auto;
      position: absolute;
      width: 50vw;
      height: 50vh;
      background: red;
    }
  </style>

  <div class="flex-box">
    <div class="box"></div>
  </div>

在PC chrome的结果是

微信图片_20171106161725.png

ios的表现

微信图片_20171106161747.jpg

所以, 使用flex布局的时候需要最好不要搭配absolute 来实现居中效果, 还是多一个div来实现嵌套吧

在做部门招新页面的时候被坑过一下, 记录一下

12/25号更新
margin: 0 auto; 也有类似的问题