css居中總結

1、水平居中系列

1. inline或者inline-*元素

   .center-children {
       text-align: center;
   }

   inline、inline-block、inline-table、inline-flex等有效

2. 一個塊級元素

   .center{
    margin:0 auto;   
    }

3. 多個塊級元素

   使用inline-block和text-align配合或者使用flex

2、垂直居中系列

1. inline或者inline-*元素
   一、單行：上下添加相等的內邊距

   .link {
       padding-top: 30px;
       padding-bottom: 30px;
     }

   二、多行：

   // 能夠模擬表格
   .center-table{
     display:table;
   }
   .center-table children{
     display:table-cell;
     vertical-align:center;
   }

   // 可使用flexbox
   .flex-center-vertically {
     display: flex;
     justify-content: center;
     flex-direction: column;
     height: 400px;
    }

2. 塊級元素

   1. 知道塊級元素的高度

      .parent {
        position: relative;
       }
       .child {
         position: absolute;
         top: 50%;
         height: 100px;
         margin-top: -50px;                                
         box-sizing: border-box; */
       }

   2. 不知道塊級元素的高度

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

   3. 使用flexbox

      .parent {
         display: flex;
         flex-direction: column;
         justify-content: center;
       }

3、居中（垂直和水平）

1. 固定寬度和高度

   .parent {
     position: relative;
   }
   
   .child {
     width: 300px;
     height: 100px;
     padding: 20px;
   
     position: absolute;
     top: 50%;
     left: 50%;
   
     margin: -70px 0 0 -170px;
   }

2. 不知道寬度和高度

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

3. 使用flexbox

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