html-布局（基础）

总结：https://mp.weixin.qq.com/s/jkTiZdS7wE-Xwv3A3RKwAg

水平居中--------：

1.  inline-block (子)  +  text-align （父）（推荐）

缺点：child里的文字也会水平居中，可以在.child添加text-align:left;

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

    .child{
        display:inline-block;
    }

    .parent{
        text-align:center;
    }

2.  table（子） +   margin（子）  （原理：先将子框设置为块级表格来显示（类似 ），再设置子框居中以达到水平居中）

缺点：不支持ie6、ie7,将div换成table

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

    .child {
        display:table;
        margin:0 auto;
    }

3. absolute (子) + transform（子）（推荐）

缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

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

    .parent {
        position:relative;
    }

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

4.flex (父) (display:flex) +   margin（子）(margin:0 auto)

缺点：不支持ie6、ie7, ie8      适合手机端

5. flex (父) (display:flex) + justify-content（父）(justify-content:center)

缺点：不支持ie6、ie7, ie8      适合手机端

垂直居中---------：

1. table-cell  (父) + vertical-align (父) （推荐）  兼容性较好，ie8以上均支持

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

    .parent {
        display:table-cell;
        vertical-align:middle;
    }

2. absolute (子) + transform（子）（推荐）

缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

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

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

3.  flex (父) +  align-items (父)      适合手机端

缺点：兼容性存在一定问题

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

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

水平垂直居中---------：

1. absolute (子) + transform（子）（推荐）

缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

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

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

2. inline-block （子） + text-align（父） +table-cell（父）  +  vertical-align（父）  （推荐） 兼容性较好

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

    </div>

    .parent {
        text-align:center;
        display:table-cell;
        vertical-align:middle;

    }
    .child {
        display:inline-block;
    }

3. flex（父）+  justify-content（父） +  align-items（父）   适合手机端

缺点：兼容性存在一定问题

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

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