CSS居中布局

水平居中

inline-block+text-align

  <div class="parent">
     <div class="child">hello</div>
  </div>

        .child {display:inline-block;} 
        .parent {text-align:center;}

table+margin

  /* table的特性不单独设置宽度;跟内容宽度一样(可以用margin: 0 auto)*/
  .child {display:table;margin: 0 auto;}

absolute + transform

  .parent {position:relative;}
  .child {position:absolute; left: 50%;transform: translateX(-50%); }

flex + justify-content

  /*  .parent {display: flex;} .child {margin: 0 auto;} */
 .parent {display: flex;justify-content:center;}

垂直居中

table-cell + vertical-align

    <div class="parent">
       <div class="child">hello</div>
    </div>

  /*把外层div变成单元格*/
   .parent {display: table-cell;vertical-align: middle; }

absolute + transform

   .parent {position: relative;}
   .child {position:absolute; top: 50%;transform: translateY(-50%);}

flex + align-items

    .parent {display: flex; align-items: center;}

居中

inline-block+text-align + table-cell + vertical-align

    <div class="parent">
       <div class="child">hello</div>
    </div>

   /*让.parent变成单元格*/
  .parent {text-align: center; display:table-cell;vertical-align:middle;}
  .child {display: inline-block;}

absolute + transform

    .parent {position: relative;}
    .child {position:absolute; left: 50%;top:50%; transform: translate(-50%,-50%);}

flex + justify-content + align-items

      .parent {dispaly: flex; justify-content: center;align-items: center}