布局

1. 居中
    // 测试结构
        <div class="parent">
            <div class="child">Demo</div>
        </div>
    - 水平居中：
        // 方式 1
        .parent: position: relative;
        .child: position: absolute; left: 50%;transform: translateX("-50%")
        // 方式 2
        .parent: text-align: center;
        .child: display: inline-block; 
        // 方式 3
        .parent: 
        .child: display: table; margin: 0 auto;
        // 方式 4 
        .parent: display: flex; justify-content: center;
        .child:
    - 垂直居中
        // 方式 1
        .parent: position: relative;
        .child: position: absolute; top: 50%; transform: translateY("-50");
        // 方式 2
        .parent: display: table-cell; vertical-align: middle;
        .child:
        // 方式 3
        .parent: display: flex; align-items: center;
        .child: 
    - 水平垂直居中
        // 方式 1
        .parent: position: relative;
        .child: position: absolute; left: 50%; top: 50%; transform: translate("-50%", "-50%");
        // 方式 2
        .parent: display: table-cell; vertical-align: middle;
        .child: display: table; margin: 0 auto;
        // 方式 3
        .parent: display: flex; justify-content: center; align-items: center;
        .child: 

        
2. 多列布局
    // 测试结构
    <div class="parent">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>

    // 方式 1
    .left: float: left; 
    .right: margin-left: 120px;// 20px边距
    // 方式 1 改进
    修改结构
    <div class="parent">
        <div class="left">Left</div>
        <div class="rightfix">
            <div class="right">Right</div>
        </div>
    </div>
    
    .left: float: left;
    .rightfix: float: right; margin-left: -100px; width: 100%;
    .right: margin-left: 120px;
    // 这种方式兼容性很好 兼容IE6+

    // 方式 2
    .parent: display: flex;
    .left: 
    .right: margin-left: 20px; flex: 1;
    

    // 方式 3
    .left: float: left; margin-right: 20px;
    .right: overflow:hidden;

    // 方式 4
    .parent: display: table; table-layout: fixed; width: 100%;
    .left: display: table-cell;
    .right: display: table-cell; padding-right: 20px;
3. 等分布局
    // 测试结构
    <div class="parent">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
        <div class="column">4</div>
    </div>
    // 方式 1
    .parent: margin-left: -10px;// 设置每一列间距为 10px 
    .column: float: left; width: 25%; padding-left: 10px; box-sizing: border-box;

    // 方式 2
    //修改结构
    <div class="parentfix">
        <div class="parent">
            <div class="column">1</div>
            <div class="column">2</div>
            <div class="column">3</div>
            <div class="column">4</div>
        </div>
    </div>
    .parentfix: margin-left: -10px;
    .parent: display: table; width: 100%; table-layout: fixed;
    .column: display: table-cell; padding-left: 10px;

    // 方式 3
    .parent: display: flex;
    .column: flex: 1;
    .column + .column: margin-left: 10px;

4. 全屏布局
    // 方式 1 position
    // 样式
    html, body, .parent {
            height: 100%;
            overflow: hidden;
        }
        .top, .left, .right, .bottom {
            position: absolute;
        }
        .top {
            left: 0;
            top: 0;
            right: 0;
            height: 100px;
            background: #333;
        }
        .left {
            left: 0;
            top: 100px;
            bottom: 50px;
            width: 200px;
            background: #fff;
        }
        .right {
            left: 200px;
            right: 0;
            top: 100px;
            bottom: 50px;
            background: #f00;
            overflow: auto;
        }
        .bottom {
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;
            background: #222;
        }
        .inner {
            min-height: 1000px;
        }

        // 结构
        <div class="parent">
            <div class="top"></div>
            <div class="left"></div>
            <div class="right">
                <div class="inner"></div>
            </div>
            <div class="bottom"></div>
        </div>
    
    // 方式 2 flex

    // 样式
    html, body, .parent {
            height: 100%;
            overflow: hidden;
        }
        .parent {
            display: flex;
            flex-direction: column;
        }
        .top {
            background: #eee;
            height: 100px;
        }
        .middle {
            background: #ecc;
            flex: 1;
            display: flex;
        }
        .left {
            background: #333;
            width: 200px;
        }
        .right {
            overflow: auto;
            flex: 1;
        }
        .inner {
            width: 100%;
            min-height: 1000px;
        }
        .bottom {
            background: #eee;
            height: 50px;
        }

        // 结构
        <div class="parent">
            <div class="top"></div>
            <div class="middle">
                <div class="left"></div>
                <div class="right">
                    <div class="inner"></div>
                </div>
            </div>
            <div class="bottom"></div>
        </div>