如何实现两、三栏布局、水平/垂直居中

1.两栏布局

所谓的两栏布局就是在一行中有两个盒子，我们给左边的盒子固定的宽度，让右边的盒子自适应后面的宽度
实现代码：

<div id="left">左边定宽</div>
<div id="right">右边,</div>

#left{
    float: left;
    width: 200px;
    margin-right: -200px;
    height: 50%;
    background: green;
}
#right{
    float: left;
    margin-left: 210px;
    width: 100%;
    height: 50%;
    background: red;
}

2、三栏布局

三栏布局就是在一行内有三个盒子，两边的盒子固定，中间的盒子自适应

        <div class="middle">
            中间
        </div>
        <div class="left">
            左侧
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        尾部
    </div>

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 两者实现方法基本遵循点： 1)两侧宽度固定，中间宽度自适应 2)中间部分在DOM结构上优先，以便先行渲染 3)允许三列中的任意一列成为最高列 4)只需要使用一个额外的<div>标签
1.圣杯布局

        .container {
            padding: 0 220px 0 220px;
            overflow: hidden;
        }
        .left,
        .middle,
        .right {
            position: relative;
            float: left;
            // 多列等高
            margin-bottom: -2000px;   
            padding-bottom: 2000px;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
        }```

**方法二：浮动布局+负外边距（双飞翼布局的两栏版）**
这种方法是创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法： 
<div id = "aside">
</div>
<div id = "main">
  <div id = "content"></div>
</div>
div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
  margin-right:-100%;
}
#main{
  width:100%;
  float:left;
}
#content{
  margin-left:300px;
  background-color:aqua;
}