盒子垂直居中的6种方式

 各位小伙伴快动手试试吧

• 利用定位+calc
• flex布局
• 利用定位+margin

• transform:translate(x,y)

• table布局

• grid布局

1.利用定位+calc

 * {
        padding: 0;
        margin: 0;
    }

.box {
        width: 200px;
        height: 200px;
        background: red;
        position: fixed;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        text-align: center;
    }

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

2.flex布局

 

 * {
        padding: 0;
        margin: 0;
    } 
.box{
       width: 100vw;
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
  }
  .item{
       width: 200px;
       height: 200px;
       background: red;
   }

<div class="box">
    <div class="item">
    </div>
</div>

 3.利用定位+margin

 * {
        padding: 0;
        margin: 0;
    }

.box {
    width: 100vw;
    height: 100vh;
    position: relative;
 }

 .item {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

<div class="box">
    <div class="item">
    </div>
</div>

4.transform

 

*{
    margin:0;
    padding:0;
}

.box {
     width: 100vw;
     height: 100vh;
     position: relative;
 }

.item {
     width: 200px;
     height: 200px;
     background: red;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

<div class="box">
    <div class="item">
     </div>
</div>

5.tabel布局

 

.box{
    display: table-cell;
    width: 100vw;
    height: 100vh;
    vertical-align: middle;
    text-align: center;
 }
 .item{
    display: inline-block;
    width: 200px;
    height: 200px;
    background: red;
 }

<div class="box">
    <div class="item">
    </div>
 </div>

6.grid布局

 

.box { 
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
 }
 .item{
    width: 200px;
    height: 200px;
    background: red;
 } 

<div class="box">
    <div class="item">
     </div>
</div>

如果对各位小伙伴有帮助的话，记得收藏转发评论 一键三连哦！

如果有更好的方式，希望各位小伙伴能积极发言