2018.10.12 布局终结

先贴地址： http://web.jobbole.com/94168/，自己的实践，主要得再学习下flex的使用；

一、水平垂直的例子（均可拆分为水平居中， 垂直居中来使用）

1. absolute + transform

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

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

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

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

        </div>
    </div>
    <style>
        .parent {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .child {
            display: inline-block;
        }

但是如果parent元素float了，就不能垂直居中了，因为float和table会冲突，另外原来vertical-align:middle要和display：table-cell一起才会有用啊,vertical-align起效的元素：inline or inline-block or inline-table;

3.  flex

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <style>
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
        }

注意低版本浏览器(ie6 ie7 ie8)不支持，项目开始前可以问清楚浏览器兼容性和设备兼容性！