单栏布局水平居中水平居中页面布局是最常见的布局形式，多出现在标题和内容区域的组织形式上。下面分别介绍四种实现水平居中的方法（注：以下示例中实现的是子元素的对齐操作，子元素的父容器为父元素）使用inline-block和text-align来实现achieve.parent{text-align:center;}.child{display:inline-block;}优点：兼容性好；缺点：需要同时设置子元素和父元素，使用margin:0auto；实现.child{display:table;margin:0auto;}优点：只需要自己设置不足：IE6、7需要调整结构，使用绝对定位实现.parent{position:relative;}/*或者实用margin-left负值也可以实现盒子宽度的一半，但是这种方式你必须知道盒子的宽度，但是兼容性好*/.child{position:absolute;left:50%;transform:translate(-50%);}不足：兼容性差，IE9以上可以用实用的flex布局实现/*第一种方法*/.parent{display:flex;justify-content:center;}/*第二种方法*/.parent{显示：flex;}。child{margin:0auto;}缺点：兼容性差，如果进行大面积布局，可能会影响效率要吃辣，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的一些元素也是如此，有的只对牛奶感兴趣，有的只喜欢坚果果冻，讨厌牛奶。至于vertical-align，他是个挑食的。他只喜欢吃果冻。他是吃果冻长大的。没有果冻，他会发脾气，不理你。我称之为“果冻依赖元素”，也称为“inline-blockdependentelement”，也就是说只有一个元素属于inline或inline-block（table-cell也可以理解为inline-block级别）级别，其上的垂直对齐属性将起作用。我对css-vertical-align的一些理解和理解在使用vertical-align的时候，由于对齐的基线是用行高的基线标注的，所以需要设置line-height或者display:table-cell;/*一种方法*/.parent{display:table-cell;vertical-align:middle;height:20px;}/*第二种方法*/.parent{display:inline-block;vertical-align:middle;line-height:20px;}实用绝对定位.parent{position:relative;}.child{positon:absolute;top:50%;transform:translate(0,-50%);}实用flex实现.parent{display:flex;align-items:center;}水平和垂直都使用vertical-align,text-align,inline-block.parent{display:table-cell;vertical-align:middle;text-align:center;}.child{display:inline-block;}使用绝对定位实现.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}使用Flex实现.parent{display:flex;justify-content:center;align-items:center;}多列布局左列定宽，右列自适应，自适应的一边是内容布局使用float+margin.left{float:left;width:100px;}.right{margin-left;margin-left:100px;}注意：IE6将有一个3pxbug利用float+margin(fix)实现
