方法一:

绝对定位 不确定 div 的宽高,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative)

div{
  background:red;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

方法二:

绝对定位 确定了当前 div 的宽高

div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法三:

绝对定位 绝对定位下top left right bottom 都设置0

<div class="child">我是子级</div>

div.child{
    width:600px;
    height:600px;
    background-color:red;
    position:absoulte;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

方法四:

flex 弹性盒子

<div class="box">
    <div class="child">我是子级</div>
</box>

div.box{
   height:800px;
   display:flex;
   align-item:center;
   justify-content:center;
   background-color:blue;
}
div.clild{
    width:600px;
    height:600px;
    background-color:red;
}

方法五

dislay:table-cell table-cell middle center组合使用

<div class="table-cell">
    content
</div>

div.table-cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid red
}