定位：3种

display:flex;

javascrip

display:table-cell

<div class="parent">

   <div class="child">

</div> </div>

定位1

.parent {     position: relative;    width: 200px;   height: 200px; }

.child {   width:50px;height:100px;  position: absolute;   top：50%; left:50%; margin-top:-25px;margin-left:-50px;}

定位2

.parent {  position: relative;  width: 200px;  height: 200px;}  

.child  {width:50px;height:100px; position: absolute;   top: 50%;left:50%;   transform: translate(-50%, -50%);  }

定位3

.parent {     position: relative;    width: 200px;   height: 200px; }

.child {   width:50px;height:100px;  position: absolute;   top：0; left:50%0; margin:auto;}

flex居中

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

script居中

<script>

    let winW=document.documentElement.clientWidth;

         winH=docunment.documentElement.clientHeight;

      let  boxW=box.offsetWidth;

            boxH=box.offsetHeight;

           box.style.position='absolute';

          box.style.left='(winW-boxX)/2'+'px';

           box.style.top='(winH-boxH)/2'+'px';

</script>

table-cell居中

.parent{

display:table-cell;

vertail-align:middle;

text-align:center;

width: 200px;   height: 200px;

}

.box{

display:inline-block;
}