css flex经典三大布局：垂直居中，两列等高，自适应宽

<div id="parent">
    <div id="child"></div>
  </div>

#parent {
/* align-content和align-items必须配合使用 */
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      outline: solid 1px;
    }
    #child {
      width: 100px;
      height: 100px;
      outline: solid 1px;
    }

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>

#parent {
      display: flex;
      width: 300px;
      height: 200px;
      background-color: pink;
    }
    #child1 {
      flex: 1;
      /* 即使设置100px宽，还是会占据剩余的所有宽度 */
      width: 100px;  
      background-color: lightblue;
    }
    #child2 {
      width: 100px;
      outline: solid 1px;
    }