实现Div的水平垂直居中布局

效果

如下图所示，当前要求实现内部div的水平垂直效果，应该如何实现？

实现方式

方式一：flex布局-01

div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

方式二：flex布局-02

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

方式三：相对布局+translate

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

方式四：相对布局+margin

div.parent {
    position: relative; 
}
div.child {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

一般使用以上4种方式就可以解决所有居中问题，不需要使用table和grid布局（此二种不是主流，没必要掌握）