1.元素单列布局水平居中
1.1.使用inline-block 和 text-align实现
.box-father{text-align: center;}
.box{display: inline-block;}
这类方法的优点在于兼容性好而不足之处是需要同时设置子元素和父元素
1.2.使用margin:0 auto来实现
.box{width:200px;margin:0 auto;}
这类方法的优点是兼容性好而缺点在于需要指定宽度，对于不确定宽度的应用场景下无法使用
1.3.使用table实现
.box{display:table;margin:0 auto;}
这类方法的优点是只需要对自身进行设置，而不足在于IE6,7需要调整结构，对于旧的浏览器还是力不从心
1.4.使用绝对定位实现
.parent{position:relative;}
.child{position:absolute;left:50%;transform:translate(-50%);}
这类方法的不足之处在于兼容性差,IE9及以上可用（低版本浏览器不兼容）
1.5.使用flex布局实现
/*第一种方法*/
.box-father{display:flex;justify-content:center;}
/*第二种方法*/
.box-father{display:flex;}
.box{margin:0 auto;}
这类方法缺点在于兼容性差，而且进行大面积的布局会影响页面效率，无法保证用户体验
2.元素垂直居中
2.1.vertical-align
在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:30px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:30px;}
此类方法在实际使用过程中太过繁琐，所以不推荐使用
2.2.使用绝对定位
.box-father{position:relative;}
.box{positon:absolute;top:50%;transform:translate(0,-50%);}
使用方法同2.1都不太简便，但是使用的情景较广
2.3.使用flex实现
.box-father{display:flex;align-items:center;}
此类方法只适用于大盒子内只有需要垂直居中的盒子
3.元素水平垂直全部居中
3.1.利用vertical-align,text-align,inline-block实现
.box-father{display:table-cell;vertical-align:middle;text-align:center;}
.box{display:inline-block;}
适用于较多的情景
3.2.利用绝对定位实现
.box-father{position:relative;}
.box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
适用于较多场景
3.3.利用flex实现
.box-father{display:flex;justify-content:center;align-items:center;}
适用于没有使用其它布局技巧的情况
4.两列布局左列定宽，右列自适应
该布局方式非常常见，用于定宽的一侧常为导航，自适应的一侧为内容的布局
4.1.利用float+margin实现
.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}
这种布局在IE6中会有3px的bug
4.2.利用float+margin(fix)实现
<div class=".box-father">
<div class="left"></div>
<div class="right-fix">
<div class="right"></div>
</div>
</div>
.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}
4.3.使用float+overflow实现
.left{width:100px;float:left;}
.right{overflow:hidden;}
在使用的过程中我们需要给自适应的盒子一个左边盒子的宽度的padding-left值来实现
4.4.使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}
4.5.使用flex实现
.box-father{display:flex;}
.left{width:100px;}
.right{flex:1;}
利用右侧容器的flex:1，均分了剩余的宽度，也实现了同样的效果。align-items 默认值为stretch，二者高度也是相等的
5.右列定宽，左列自适应
5.1.使用float+margin实现
.box-father{height:100px;margin:0 auto;}
.left{margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;}
5.2.使用table实现
.box-father{display:table;table-layout:fixed;width:100%;}
.left{display:table-cell;}
.right{width:100px;display:table-cell;}
5.3.使用flex实现
.box-father{display:flex;}
.left{flex:1;}
.right{width:100px;}
6.两列定宽，一列自适应
左右边为定宽，中间自定义用来搜索框或导航栏
6.1.利用float+margin实现
.left,.center{float:left:width:200px;}
.right{margin-left:400px;}
6.2.利用float+overflow实现
.left,.center{float:left:width:200px;}
.right{overflow:hidden;}
6.3.利用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left,.center,.right{display:table-cell;}
.left,.center{width:200px;}
6.4.利用flex实现
.box-father{display:flex;}
.left,.center{width:100px;}
.right{flex:1}
7.两侧定宽，中栏自适应
7.1.利用float+margin实现
.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}
7.2.利用table实现
.box-father{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}
7.3.利用flex实现
.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}
还有一些情况会在下一次整理，这里的每一种方法都不能做到适用于每一种情况，在每一种情况下都有不同的适用方法。
