绝对定位元素的三种居中方式

绝对定位元素的三种居中方式：（横向居中）

<div class="father">
    <img class="pro-img" src="../../static/img/xxx@2x.png" alt="">
</div>

• 第一种：使用flex布局

<style scoped lang="scss">
  .father{
     width: 100%;
     position: relative;  /*注意：父级的position要设置为relative*/
     display: flex;
     justify-content: center;
  }
  .pro-img{
      width: 257px;
      height: 214px;
      position: absolute;
      bottom: 64px;
   }
         
</style>

• 第二种：使用margin

<style scoped lang="scss">
  .father{
     width: 100%;
     position: relative;  /*注意：父级的position要设置为relative*/
  }
  .pro-img{
      width: 257px;
      height: 214px;
      position: absolute;
      bottom: 64px;
      left: 0;
      right:0;
      margin-left: auto;
      margin-right: auto;
   }
         
</style>

• 第三种：使用left和transform

<style scoped lang="scss">
  .father{
     width: 100%;
     position: relative;  /*注意：父级的position要设置为relative*/
  }
  .pro-img{
      width: 257px;
      height: 214px;
      position: absolute;
      bottom: 64px;
      left: 50%;
      transform: translateX(-50%);
   }
         
</style>