六种常用的设置水平垂直居中的方式

 1 position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
     
      2    position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;

      3    position:absolute;
            left:50%;    /* 定位父级的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */

    4      display:flex;  父元素不定宽高,三句话即可
             justify-content:center;
             align-items:center;
     5 将父盒子设置为table-cell元素   text-align:center和vertical-align:middle
              .tableCell{
      display: table;
    }
      .tableCell .ok{
        display: table-cell;
         text-align: center;
        vertical-align: middle;
       }
         .tableCell .innerBox{
         display: inline-block;
        }
     6利用calc计算位置
#       pc端移动端布局有什么区别 

猜你喜欢

转载自blog.csdn.net/binlety/article/details/81431351