未知宽高div水平垂直居中

通过定位和transform来实现

    .parent{
        position:relative;
    }
    .children{
        position:absolute;
        top:50%;
        left:50%;
        background:#fff;
        transform:translate(-50%,-50%);
    }

利用flex布局来实现

    .parent{
        width:100%;
        height:200px;
        background:#666;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .children{
        background:blue;
    }

将父元素设置为table，子元素设置为table-cell，利用table属性

    .parent{
        display:table;
        width:100%;
        height:200px;
        background:#ccc;
    }
    .children{
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        background:blue;
    }

定位，宽高可动态赋值

.parent{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: auto;
      height: auto;
      .children {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }

参考原文：https://blog.csdn.net/tozeroblog/article/details/79943579