总结几种居中布局及三列布局

水平居中及垂直居中

// 方案一（宽度固定情况）

#parent{
    width: 100%;
    height:100%;
    position: relative;
}
#child{
    width: 400px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #ccc;
}

// 方案二（宽度固定情况）

#parent{
    position: relative;
    width: 100%;
    height: 100%;
}
#child{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    background-color: #ccc;
}

// 方案三（宽度不固定情况）

#parent{
    position: relative;
    width: 100%;
    height: 100%;
}
#child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ccc;
}

// 方案四（宽度不固定情况）

#parent{
    display: flex;
    justify-content:center;
    align-items:center;    
    width: 100%;
    height: 100%;
}
#child{
    background-color: #ccc;
}

两边固定中间自适应的三列布局

方案一 浮动
注意：中间的center结构要放到最后面 以及父元素伪类清除浮动，

.left{
    float: left;
    width: 200px;
    height: 200px;
}
.right{
    float: right;
    width: 100px;
    height: 100px;
}
.center{
    margin:0 120px 0 220px;
}

方案二 定位
注意：这种方案高度不能自适应会塌陷

.parent{
    position: relative;
}
.left{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
}
.center{
    margin:0 120px 0 220px;
}

方案三 双飞
注意：这种布局的结构要将中间center结构放置到最前面并套上一个容器，结构样式如下

<div>
  <center></center>
</div>
<left></left>
<right></right>

div {
  float: left;
  width: 100%;
}
center {
  margin: 0px 140px 0px 220px;
}
left {
  float: left;
  margin-left: -100%;
  width: 200px;
}
right {
  float: left;
  margin-left: -120px;
  width: 120px;
}

左右两栏布局：四种

1.左右浮动  
2.一边浮动 一边margin 
3.position定位

4.父：display：flex

子1：flex：0 0 60px width：60px

子2：flex：1

 

垂直居中

父:display:table 子:display: table-cell, vertical-align:可以调整对齐方式
注意：用浮动方法分左右两栏时：左边用浮动 右边margin负值 外层一定记得overflow并清除浮动