常用居中法：
居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：
<div class="parent">
<div class = "children"></div>
</div>
1.水平居中
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上text-align:center;
2.垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute 并设置marigin:auto
左中右和左右布局
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
1. float+margin
布局步骤:
1.对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。
2.对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。
.left { float:left; width:100px;}
.right{ float:right; width:200px; }
.main{ margin-left:100px; margin-right:200px;}
注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列.这个布局会先渲染左右两列，然后才是main。
左右布局的实现方法
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。
2. position+margin
布局步骤:
1.对两边侧栏分别设置宽度，设置定位方式为绝对定位。
2.设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。
3.对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。
.left,.right { position:absolute;top:0;width:200px;}
.left{ left:0;}
.right{right:0;}
.main{ margin:0 200px;}
本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。
与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。
如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。
左右布局的实现方法
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。
