美文网首页
未知宽高或已知宽高的水平、垂直居中

未知宽高或已知宽高的水平、垂直居中

作者: Amy_yqh | 来源:发表于2018-11-21 09:26 被阅读0次
    // 1
    .wraper {
      position: relative;
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px;
      }
    }
    
    // 2
    .wraper {
      position: relative;
      .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    // 3
    .wraper {
      .box {
        display: flex;
        justify-content:center;
        align-items: center;
        height: 100px;
      }
    }
    
    // 4
    .wraper {
      display: table;
      .box {
        display: table-cell;
        vertical-align: middle;
      }
    }
    
    

    相关文章

      网友评论

          本文标题:未知宽高或已知宽高的水平、垂直居中

          本文链接:https://www.haomeiwen.com/subject/cylqqqtx.html