CSS居中技巧

水平居中元素

1. css3tansform

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

2. flex布局

        .parend {
            display: flex;
            justify-content: center; // 主轴方向    
        }
   

3. 居中的元素为常规文档流的内联元素（inlie-block）

   • 常见的内联元素有span、a、img、label、input标签等

     .parent {
       .text-align: center;
     }
     

4. 居中的元素为常规文档流的块机元素（block）

   • 常见的块机元素有div、p、