CSS 水平垂直居中

<div class="wrap">
    <div class="center"></div>
</div>

方法一：

  .wrap {
        width: 100%;
        height: 100%;
        background: yellow;
    }
    .wrap .center {
        width: 100px;
        height: 100px;
        background: green;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

方法二：

.wrap {
      position: absolute;
      background: yellow;
      width: 100%;
      height: 100%;
    }
    .center {
        position: absolute;
        background: green;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        width: 100px;
        height: 100px;
    }

方法三：

   .wrap {
      background: yellow;
      width: 100%;
      height: 100%;
      display: flex;
      position: absolute;
    }

    .center {
        background: green;
        width: 100px;
        height: 100px;
        margin: auto;
    }

方法四：

  .wrap {
        background: yellow;
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
    }

    .center {
        background: green;
        width: 100px;
        height: 100px;
    }