CSS-Layout旨在打造一个详尽的前端布局代码学习库（自从使用框架开发，CSS生疏了很多，所以打开这个库topractice)顺丰无法正确解析包含中文的网址，所以部分预览链接无法重定向。请访问我的博客阅读这篇文章。计划不同。方案选择的基本思路：子元素为行内元素：在父元素上设置text-align:center；固定宽度块元素：设置左右外边距值为auto；变宽块元素：设置子元素为display:inline，然后在父元素上设置text-align:center；通用方案：flex布局，在父元素上设置display:flex;justify-content:center；常用方法示例：注意：为了统一显示效果，在下面的示例代码中设置了父子元素固定的宽高，不需要设置，子元素的宽度由内容控制孩子。方法一：text-align+inline-block设置：在父元素上设置text-align:center（对inline元素起作用），子元素设置display:inline-block（为了兼容IE6和7，替换它与显示：内联；缩放：1；）；优点：兼容性好缺点：需要额外的代码来修复由于继承父元素的text-align:center导致的子元素内容排列的影响，如果需要添加.child{text-align:left}方法二：表格+边距设置：为子元素设置display:table（该元素会显示为块级表格，元素表现得像块，但宽度跟随内容宽度）（为了兼容IE67、将div结构替换为table结构）；优点：只需要设置子元素缺点：为了向后兼容IE6、7，需要改变html结构方法三：absolute+transform设置：为父元素设置position:realatve（作为参考）)，为子元素设置position:absolute;left:50%（绝对定位元素的宽度也取决于内容），然后为子元素设置transform:translateX（-50%）（为了兼容IE67、将div结构替换为table结构即可）；优点：元素居中，不会影响其他元素缺点：transform不兼容低版本IE方法四：flex+justify-content设置：在父元素上设置display:flex;justify-content:center（这样内部元素会变成align-items），align-items的宽度默认是auto的，所以跟着内容宽度的变化，然后justify-content:center属性将使子元素居中。优点：只需要设置父元素。缺点：flex不兼容低版本的IE。垂直居中。垂直居中是单行内联文本、多行内联文本、块元素对子元素采用的方案。是不同的父元素固定，子元素为单行行内文本：设置父元素的高度等于行高line-height。设置垂直对齐：中间；块元素：设置子元素position:absolute并设置top和bottom为0，父元素应设置为static、margin:auto以外的值；一般解决方案：flex布局，为父元素设置{display:flex;align-items:center;}常用方法举例：方法一：table-cell+vertical-align设置：子容器的高度不固定，为父元素设置display:table-cell（parent变成cell，),继续设置vertical-align:center（使内联元素垂直居中）；优点：兼容性好（支持IE8）缺点：IE8以下版本需要调整页面结构为table方法二：absolute+transform设置：对父元素设置position:realatve（使其成为引用），setposition:absolute;left:50%为子元素（绝对定位元素的宽度也取决于内容），然后为子元素设置transform:translateY(-50%)（兼容IE6、7时，只需替换具有表结构的div结构）；优点：居中元素不会影响其他元素缺点：transform不兼容低版本IE方法三：flex+align-items设置：在父元素上设置display：flex（align-items默认属性为stretch）,然后设置align-items:center;优点：只需要设置父元素缺点：flexalign-items不兼容低版本的IEblock+table-cell+vertical-align方法二：absolute+transform方法三：flex+justify-content+align-items多列布局一列固定宽度，一列自适应宽度1.一列固定宽度，一列自适应宽度（float+margin)预览源代码2.一列固定宽度，一列自适应宽度(float+margin)fix改进预览源代码注意：此方法没有IE6中的3-pixelbug，但是.left不能被选中，需要设置。left{position:relative}增加层级此方法适用于多版本浏览器（包括IE6）。缺点是冗余的HTML文本结构。3.一列固定宽度，一列自适应宽度（float+overflow）预览源码4.一列固定宽度，一列自适应宽度（table+table-cell）预览源码5.一列固定宽度width,一栏自适应宽度(flex)预览多栏定宽源码，一栏自适应宽度是根据以上需求实现一栏定宽和一栏自适应，多栏fixed-width只需要在原来的一列fixed-width的基础上增加新的列，最后一列仍然会自动适应剩余宽度。基于flex的实现，可以做如下修改： .left 左边固定宽度
