元素垂直居中的几种方式

Posted 2021-08-04 老张在线敲代码

第一种

<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;
    }

原文链接：https://blog.csdn.net/WangLuke_/article/details/118353837