居中布局多种方式归纳

水平居中：

 

1.inline-block+text-align (居中的情况必须子原素是inline)

代码：

.parent{  
   background: #eee;
   width: 200px;  
   text-align: center;    
}
.child{
  display: inline-block;
  background: #000;
  color: #fff;  
}

 

2.table+margin

.parent{
        background: #eee;
        width: 200px;
    }
    .child{
        display:table;
        margin:0 auto;
        background: #000;
        color: #fff;
    }

 

3.absolute+transform(translateX是相对与自身的计算)

.parent{
        background: #eee;
        width: 200px;
        height: 50px;
        /* ---------- */
        position: relative;
        
       
    }
    .child{
        background: #000;
        color: #fff;
         /* ---------- */
         position: absolute;
         left: 50%;
         transform:translateX(-50%) ; 
    }

 

4.flex+justify-content

 .parent{
        background: #eee;
        width: 200px;
        height: 50px;
        /* ---------- */
        display: flex;
        justify-content: center;
    }
    .child{
        background: #000;
        color: #fff;
         /* ---------- */
    }

垂直居中

1.table-cell+vertical-align

.parent{
        background: #eee;
        width: 100px;
        height: 200px;
        /* ---------- */
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        width: 100px;
        height: 100px;
        background: #000;
        color: #fff;
         /* ---------- */
    }

2.absolute+transform

 .parent{
        background: #eee;
        width: 100px;
        height: 200px;
        /* ---------- */
        position: relative;
    }
    .child{
        width: 100px;
        height: 100px;
        background: #000;
        color: #fff;
         /* ---------- */
         position: absolute;
         top:50%;
         transform: translateY(-50%);
    }

3.flex+align-items

.parent{
        background: #eee;
        width: 100px;
        height: 200px;
        /* ---------- */
        display: flex;
        align-items: center;
    }
    .child{
        width: 100px;
        height: 100px;
        background: #000;
        color: #fff;
         /* ---------- */
    }

水平竖直居中

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

 .parent{
        background: #eee;
        width: 100px;
        height: 200px;
        /* ---------- */
        text-align: center;
        display: table-cell;
        vertical-align: middle;
       
    }
    .child{
        width: 50px;
        height: 50px;
        background: #000;
        color: #fff;
         /* ---------- */
         display: inline-block;
    }

2.absolute+transform

 .parent{
        background: #eee;
        width: 100px;
        height: 200px;
        /* ---------- */
        position: relative;
       
    }
    .child{
        width: 50px;
        height: 50px;
        background: #000;
        color: #fff;
         /* ---------- */
         position: absolute;
         left: 50%;
         top:50%;
         transform: translate(-50%,-50%);
    }

 

 

3.flex+justify-content+align-items

.parent{
        background: #eee;
        width: 100px;
        height: 200px;
        /* ---------- */
        display: flex;
        justify-content: center;
        align-items: center;
       
    }
    .child{
        width: 50px;
        height: 50px;
        background: #000;
        color: #fff;
         /* ---------- */
       
    }