css上下左右居中

1.第一种通过flex实现

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

2. 通过transform

.child{
    position: absolute;
    top: 50%; 
    left:50%;
    transform: translateY(-50%,-50%);
}

3.知道宽高的情况下

.child{
    position: absolute;
    top: 50%; 
    left:50%;
    width:100px;
    heith:100px;
    margin-top:-50px;
    margin-bottom:-50px;
}

4.display: table-cell; 将容器元素设置为表格单元格

.div{
display: table-cell;
vertical-align: middle;
text-aglin:center;
}