css佈局方式總結

### 居中佈局 ###

1、水平居中

* 要求：子元素於父元素水平居中且其（子元素與父元素）寬度都可變。


```` javacript

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

````

1. inline-block + text-align 

        .child {
            display: inline-block;
          }
          .parent {
            text-align: center;
          }
2. table + margin 

        .child {
            display: table;
            margin: 0 auto;
          }
        
3. absolute + transform

        .parent {
            position: relative;
          }
          .child {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
4. flex + justify-content

        .parent {
            display: flex;
            justify-content: center;
          }
5. table-cell + vertical-align
    
        .parent {
            display: table-cell;
            vertical-align: middle;
          }
6. flex + align-items

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

2、水平與垂直居中

* 要求： 子元素於父元素垂直及水平居中且其（子元素與父元素）高度寬度都可變。


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


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

    .parent {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
      }
      .child {
        display: inline-block;
      }
2.absolute + transform

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

3.flex + justify-content + align-items

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

3、多列布局

* 一列定寬，一列自適應

        <div class="parent">
          <div class="left">
            <p>left</p>
          </div>
          <div class="right">
            <p>right</p>
            <p>right</p>
          </div>
        </div>

1.float + margin

    .left {
        float: left;
        width: 100px;
      }
      .right {
        margin-left: 100px
        /*間距可再加入 margin-left */
      }

2.float + overflow
    
    .left {
        float: left;
        width: 100px;
      }
      .right {
        overflow: hidden;
      }

3.table

    .parent {
        display: table;
        width: 100%;
        table-layout: fixed; //table 的顯示特性爲每列的單元格寬度合必定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設定佈局優先。
      }
      .left {
        display: table-cell;
        width: 100px;
      }
      .right {
        display: table-cell;
        /*寬度爲剩餘寬度*/
      }

4.flex

    .parent {
        display: flex;
      }
      .left {
        width: 100px;
        margin-left: 20px;
      }
      .right {
        flex: 1;
        /*等價於*/
        /*flex: 1 1 0;*/
      }    

* 兩列定寬，一列自適應

````
        <div class="parent">
          <div class="left">
            <p>left</p>
          </div>
          <div class="center">
            <p>center<p>
          </div>
          <div class="right">
            <p>right</p>
            <p>right</p>
          </div>
        </div>
````

    .left, .center {
        float: left;
        width: 100px;
        margin-right: 20px;
      }
      .right {
        overflow: hidden;
        /*等價於*/
        /*flex: 1 1 0;*/
      }

 

[github地址：https://github.com/Hasyou99/Daily-summary](https://github.com/Hasyou99/Daily-summary)