元素垂直水平居中方法

第一种

<div className="boxOne">
    <div className="boxOne_erz"></div>
</div>

.boxOne {
    width: 200px;
    height: 200px;
    background: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxOne_erz {
    width: 50px;
    height: 50px;
    background: red;
}

第二种

<div className="boxTwo">
    <div className="boxTwo_erz"></div>
</div>

 .boxTwo {
    width: 200px;
    height: 200px;
    background: purple;
    position: relative;
  }
    .boxTwo_erz {
      width: 50px;
      height: 50px;
      background: yellow;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

第三种

<div className="boxThree">
    <div className="boxThree_erz"></div>
</div>

.boxThree {
    width: 200px;
    height: 200px;
    position: relative;
    background: red;
  }
    .boxThree_erz {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -25px 0 0 -25px;
      background: yellow;
    }

第四种

<div className="boxFour">
    <div className="boxFour_erz"></div>
</div>

.boxFour {
    width: 200px;
    height: 200px;
    background: purple;
    position: relative;
  }
    .boxFour_erz {
      width: 50px;
      height: 50px;
      background: yellow;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

第五种

<div className="boxFive">
    <div className="boxFive_erz"></div>
</div>

.boxFive {
    width: 200px;
    height: 200px;
    background: aquamarine;
    display: flex;
  }
    .boxFive_erz {
      width: 50px;
      height: 50px;
      background: aqua;
      margin: auto;
    }

PS：第1、2、5种子级可以不设置高，可以由子级内容自动撑开，感兴趣的同学可以尝试一下哦(*^▽^*)