手写一个上下左右居中的div

实现效果： 第一种：使用flex布局

    <div class="container">
        <div class="box"></div>
    </div>

      *{
         margin: 0;
         padding: 0;
       }
       .container{
           display:flex;
           justify-content:center;
           align-items:center;
           width:100vw;
           height:100vh;
       }
       .box{
           width:100px;
           height:100px;
           background-color:pink;
       }

第二种：利用绝对定位

    <div class="container">
        <div class="box"></div>
    </div>

    *{
       margin: 0;
       padding: 0;
    }
    .container{
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-100px;//根据子元素宽度的一半
        margin-top:-100px;//根据子元素高度的一半
    }
    .box{
        width:200px;
        height:200px;
        background-color:pink;
    }

第三种：利用table布局

    <div class="table">
      <div class="father">
        <div class="son"></div>
      </div>
    </div>

     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .table {
        display: table;
        width: 100vw;
      }
      .father {
        display: table-cell;
        vertical-align: middle;
        width: 100vw;
        height: 100vh;
        border: 1px solid rebeccapurple;
      }
      .son {
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: pink;
      }