用flex實現css裏的三大經典布局，不需要額外很多代碼。

<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="child" style
 
="height: 300px;"></div>
    <div id="child"></div>
  </div>

#parent {
      display: flex;
      justify-content: center;
      align-content: center;
/*  stretch讓盒子內的每個元素的高度都等於行高 */
      align-items: stretch; 
      width: 300px;
    }
    #child {
      width: 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;
    }

css flex經典三大布局：垂直居中，兩列等高，自適應寬