<div class="wreap">
      <div class="box size"></div>
</div>

.wreap{
    position: relative;
    top: 200px;
    left: 500px;
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
}
.box{
}
.size{
    width: 100px;
    height: 100px;
    background-color: #ff00ff;
}

上面是统一的html和css设置。

size样式用来子元素的宽高变化

一、子元素定宽高

1. absolute + margin

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px; 
}

.box{
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

3.absolute + auto

.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

margin： auto会根据元素的宽高自动计算其margin值，但是如果不加position，auto在计算时margin-top和margin-bottom的值是0，也就是等于margin：0 auto，只能实现水平居中，无法垂直居中。

如下图所示：

当设置position并把四周距离都设为0后，margin-top和margin-bottom的值就出现了，如下图所示

这个事情看上去比较神奇，其实也是有内在逻辑的。

一个元素既要贴着上边挨着下边，还不能拉伸自身高度，那怎么办，自然是让margin动一动啦，一动margin设置的auto就会自动计算上下间距的值，进而实现垂直居中。

通过这里也可以看出position:abslote 绝对定位其实是以盒模型外侧左上角作为基准点实现的。

当然既然讨论到了这里，喜欢搞事的小伙伴自然会想到，那如果我即设置了距离top，right，bottom，left为0，有设置maigin为一个定值且小于到达父元素内边的值会如何呢？

可以说这种矛盾的定义日常工作中尽量不要做，当然在这里搞一下事是没问题的。

结论如下： 会优先执行margin，可见margin的优先级比position要高一些。

二、子元素不定宽高

效果如上图所示

1. absolute +tansform

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #ff00ff;
}

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

完结，撒花~~~~~~~~~~~~~~~