1、水平居中
方法一：margin:0 auto；
是最常见的水平居中解决方案，但有其局限性：块级元素，已知宽度，父级元素有宽度
方法二：text-align + inline-block
在父级元素上设置text-align：center;将需要居中的元素设置为inline-block（或inline）
方法三：position绝对定位
对于需要居中的元素：
position:absolute;(同时设置父级元素relative)
left:50%;(包括了元素本身的宽度)
transform:translateX(-50%);
局限性：CSS3属性兼容性不好
方法四：flex弹性布局之justify-content
作用于父级元素
#parent{
display:flex;
justify-content:center;`
}
2、垂直居中
方法一：height +line-height
对于一个需要居中的 行内（块）元素 ，设置父元素的高度与行高相等，即可实现垂直居中
方法二：table-cell + vertical-align
.parent{
display:table-cell;
vertical-align:middle
}
方法三：absolute+transform
类似于水平居中
方法四：flex+align-items
类似于水平居中
.parent{
display:flex;
align-items:center;
}
3、左边固定右边自适应
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left{
float:left;
width: 200px;
height:400px;
background-color: blue;
}
.right{
height:400px;
background-color: red;
margin-left:210px;
}
4、右边固定左边自适应
方法与 情况三 类似，但有一点需要注意：无论是哪种情况，再html结构中，都要把浮动块写在前面，否则浮动块会被挤到下一行。
HTML
<div class="right"></div>
<div class="left"></div>
CSS
.left{
height:400px;
background-color: red;
margin-right:210px;
}
.right{
float:right;
width: 200px;
height:400px;
background-color: blue;
}
5、两边固定中间自适应
类似于两栏布局，同样是浮动栏先渲染：
HTML:
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
CSS:
.left{
float:left;
width: 200px;
height:400px;
background-color: red;
}
.right{
float:right;
width:200px;
height:400px;
background-color: blue;
}
.middle{
height: 400px;
background-color: yellow;
margin:0 210px 0 210px;
}
但在实际情况下，中间栏才是主要内容，需要优先渲染，也就是说，DOM结构中，中间栏需要写在最前面，但是上文中提到过，浮动块必须写在最前面；解决方案是：三栏全浮动。
有以下两种经典的布局方式，它们的共同点是：固比固布局，中间栏放到文档流前面，保证先行渲染。
实现方式是：三栏全部float:left浮动。
区别在于解决中间栏div的内容不被遮挡上：圣杯布局是在父级添加左右padding，将三栏全部挤到中间，然后在两侧边栏添加相对定位，配合left和right属性，将它们挪向两边，为中间内容腾出位置；而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，对嵌套的div设置margin-left和margin-right。
5.1 圣杯布局
HTML:
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.container{
overflow:hidden;
padding:0 200px;
}
.middle{
width:100%;
height:400px;
float:left;
background-color: yellow;
}
.left{
width:200px;
height:400px;
float:left;
background-color: blue;
margin-left:-100%;（挤上去）
position:relative;
left:-200px;
}
.right{
width:200px;
height:400px;
float:left;
background-color: darkseagreen;
margin-left:-200px;（挤上去）
position:relative;
right:-200px;
}
/*
解决遮挡的代码是：
.container中 padding:0 200px;
.left中 position:relative;left:-200px;
.right中 position:relative;right:-200px;
*/
5.2 双飞翼布局
HTML:
<div class="container">
<div class="middle">
<div id="inside">middle</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.container{
overflow:hidden;
}
.middle{
width:100%;
height:400px;
float:left;
background-color: yellow;
}
.left{
width:200px;
height:400px;
float:left;
background-color: blue;
margin-left:-100%;（挤上去）
}
.right{
width:200px;
height:400px;
float:left;
background-color: darkseagreen;
margin-left:-200px;（挤上去）
}
/*解决遮挡*/
#inside{
margin:0 210px;
height:400px;
background-color:red;
}
如图：
清除浮动
由于上述布局很多用到了浮动，为了消除浮动元素对于其它元素布局的影响，就必须清除浮动。
浮动会导致的问题：
1、父级元素不能正常撑开
2、背景不能正常显示
3、margin不能正确显示
etc..
清除浮动的部分方法：
1、在浮动元素的同级，增加一个空元素，并给该空元素设置clear:both;
2、在父级元素上设置overflow:auto;zoom:1
3、在父级添加伪元素after:after{content:"";display:block;clear:both;}
最后一点
上文中提到的两栏布局，都是优先加载了浮动栏，若要内容栏优先，可以参考双飞翼布局和圣杯布局，实现方式是一样的。
或者换一种思路：之前我们浮动的是固定栏，现在可以浮动自适应栏，以左栏固定右栏自适应为例：设置右栏100%，右浮动；然后再写左边栏。
