如何实现盒子水平垂直居中 about front-end-interview HOT 4 OPEN

//第一种
    #box1 {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      position: absolute;
      left: 50%;
      right: 50%
      transform: translateX(-50%) translateY(-50%);
    }
//第二种
    #box1 {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
//第三种flex:父元素设置
display:flex;
justify-content:center;
align-items:center;
//第四种grid。给父元素设置
dispaly: grid;
justify-items: center;
align-items: center;
//也可以将justify-items和align-items合并为place-items:center