水平垂直居中 

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

　　

方法一:

.box{
     width: 100px;
     height: 100px;
     border: 1px solid red;
     display: flex;
}
.box1{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      margin: auto;
}

 

方法二:

.box{
     width: 100px;
     height: 100px;
     border: 1px solid red;
     position: relative;
}
.box1{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      position: absolute;
      left: 50%;
      margin-left: -25px;
      top: 50%;
      margin-top: -25px;
}

 

方法三:

.box{
     width: 100px;
     height: 100px;
     border: 1px solid red;
     position: relative;
}
.box1{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
}

 

方法四:

.box{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      position: relative;
}
.box1{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
}

 

方法五:

.box{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
}
.box1{
      width: 50px;
      height: 50px;
      border: 1px solid red;
}

 

 

posted @ 2020-09-04 14:23  king-xin  阅读(109)  评论(0)    收藏  举报