元素垂直居中

元素垂直居中

🎄 position + transform

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
  }
</style>

🎄 position + transform 元素平移

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     position: relative;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }
</style>

🎄 position + margin：auto

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     position: relative;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
  }
</style>

🎄 position 需要确定父子元素的宽高

<div class="big">
    <div class="small"></div>
</div>
<style>
 .big {
     height: 300px;
     width: 300px;
     background-color: orangered;
     position: relative;
  }
  .small {
     height: 100px;
     width: 100px;
     background-color: blue;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -50px;
     margin-top: -50px;
  }
</style>