绝对定位水平垂直居中

<div id='wrap'>
  <div id='item1'></div>
</div>

#wrap {
     width: 500px;
     height: 500px;
     border: 1px dotted black;
     margin: 0 auto;
     position: relative; 
   }
 
   #item1 {
     width: 100px;
     height: 100px;
     background-color: purple;
     /* 核心代码 */
     position: absolute;
     margin: auto;
     top: 0; /*垂直居中*/
     bottom: 0;  /*垂直居中*/
     left: 0;   /*水平居中*/
     right: 0;  /*水平居中*/
     
   }