怎么让一个子级div水平垂直居中

1、固定宽高，使用定位

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -250px;
    width: 500px;
    height: 500px;
    background: yellow;
    z-index: 1;
}

2、非固定宽高（也适用于固定宽高），使用定位+transfrom

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    background: yellow;
    z-index: 1;
    transform: translate3d(-50%,-50%,0);
}

3、flex布局

.parent {
        display: flex;
        width: 400px;
        height: 400px;
        background: red;
        justify-content: center; //水平居中
        align-items: center;    //垂直居中
      }
.child {
        width: 200px;
        height: 200px;
        background: #000;
      }

或者

.parent {
        display: flex;
        width: 400px;
        height: 400px;
        background: red;
      }
.child {
        width: 200px;
        height: 200px;
        background: #000;
        margin: auto;
      }

4、table-cell布局

因为table-cell相当于表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block

    <div class="parent">
      <div class="content">
        <div class="child"></div>
      </div>
    </div>

      .parent {
        width: 400px;
        height: 400px;
        display: table;
      }
      .content {
        background: red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      .child {
        background: #000;
        display: inline-block;
        width: 200px;
        height: 200px;
      }

flex、table-cell布局因为改变了父级div的display属性，在实际应用当中，多个子节点的情况下，反而不太好用，酌情选择方法