我们在日常开发中经常会遇到布局问题。下面介绍几种常用的css布局方案，下面上代码吧！所有demo源码github如下：https://github.com/zwwill/css-layout/tree/master/demo-1链接：http://pan.baidu.com/s/1cHBH3g密码：obkb居中布局belowcentered布局以可变宽度为前提，固定宽度情况包括1、水平居中a)inline-block+text-align.parent{text-align:center;}.child{display:inline-block;}tips:这个方案兼容性好，兼容IE8，IE567不支持inline-block，需要用csshack来兼容b)table+margin.child{display:table;margin:0auto;}tips:该方案兼容IE8，可以用
代替css写法，兼容性好c)absolute+transform.parent{position:relative;height:1.5em;}.child{位置：绝对;左：50%；transform:translateX(-50%);}tips：此方案兼容IE9，由于transform兼容性限制，如果.child是定宽元素，可以使用如下写法，兼容性极佳。parent{位置：相对；height:1.5em;}.child{位置：绝对;宽度：100px；左：50%；margin-left:-50px;}d)flex+justify-content.parent{display:flex;justify-content:center;}.child{margin:0auto;}tips:flex是一个强大的css，为布局而生，它可以轻松满足各种居中、对齐、平分的布局需求，但是由于目前的浏览器浏览器兼容性问题，这个解决方案很少用，但是值得期待浏览器兼容性好的那一天！2.垂直a)table-cell+vertical-align.parent{display:table-cell;vertical-align:middle;}tips:可以换成
布局，兼容性好b)absolute+transform.parent{position:relative;}.child{position:absolute;顶部：50%；transform:translateY(-50%);}tips:存在css3兼容性问题，固定宽度兼容性好c)flex+align-items.parent{display:flex;align-items:center;}tips:兼容高版本浏览器，低版本不适用3.水平和垂直a)inline-block+table-cell+text-align+vertical-align.parent{text-align:center;显示：表格单元格；vertical-align:middle;}.child{display:inline-block;}tips:兼容IE8b)absolute+transform.parent{position:relative;}.child{position:absolute;左：50%；顶部：50%；transform:translate(-50%,-50%);}tips:兼容性稍差，兼容IE10及以上c)flex.parent{display:flex;证明内容：居中；align-items:center;}tips:兼容不同的多列布局1.一列固定宽度，一列自适应a)float+margin.left{float:left;宽度：100px;}.right{左边距：120px;}tips:此方案更适合定宽布局，变宽布局推荐使用方法bb)float+overflow.left{float:left;宽度：100px；margin-right:20px;}.right{overflow:hidden;}Tips：个人常用写法，此方案无论是多列定宽还是变宽都能完美实现，也能实现升序布局c)table.parent{显示：表格；宽度：100%；表格布局：固定；}.left,.right{显示：表格单元格；}.left{宽度：100px；padding-right:20px;}d)flex.parent{display:flex;}.left{width:100px;padding-right:20px;}.right{flex:1;}2.多列定宽，一列自适应a)float+overflow.left,.center{float:left;宽度：100px；margin-right:20px;}.right{overflow:hidden;}b)table.parent{display:table;宽度：100%；table-layout:fixed;}.left,.center,.right{display:table-cell;}.right{width:100px;padding-right:20px;}c)flex.parent{display:flex;}.left,.center{width:100px;padding-right:20px;}.right{flex:1;}3.一列变宽，一列自适应a)float+overflow.left{float:left;margin-right:20px;}.right{overflow:hidden;}.leftp{width:200px;}b)table.parent{display:table;宽度：100%；}.left，.right{显示：表格单元格；}.left{宽度：0.1%；padding-right:20px;}.leftp{width:200px;}c)flex.parent{display:flex;}.left{margin-right:20px;}.right{flex:1;}.leftp{width:200px;}4、多列不定宽，列自适a)float+overflow.left,.center{float:left;margin-right:20px;}.right{overflow:hidden;}.leftp,.centerp{width:100px;}5、等分a)float+margin.parent{margin-left:-20px;}.column{向左飘浮;宽度：25%；左填充：20px；box-sizing:border-box;}b)table+margin.parent-fix{margin-left:-20px;}.parent{display:table;宽度：100%；table-layout:fixed;}.column{display:table-cell;padding-left:20px;}c)flex.parent{display:flex;}.column{flex:1;}.column+.column{margin-left:20px;}6、等高a)float+overflow.parent{溢出：隐藏；}.left,.right{padding-bottom:9999px;保证金机器人汤姆：-9999px；}。左{浮动：左；width:100px;}.right{overflow:hidden;}b)table.parent{display:table;宽度：100%；}.left{显示：表格单元格；宽度：100px；margin-right:20px;}.right{display:table-cell;}c)flex.parent{显示：flex;宽度：100%；}.left{宽度：100px；}.right{flex1；.empty{高度：0;visibility:hidden;}详细解释请参考https://segmentfault.com/a/1190000011007357圣杯布局&双飞翼布局这只是代码展示，区别解释请移步下面【方案】圣杯布局&双飞翼布局圣杯布局[JsFiddle]https://jsfiddle.net/zwwill/px57xzp4/
headermainleftright<divclass="footer">footer.container{width:500px;margin:50pxauto;}.wrapper{padding:0100px0100px;}.col{position:relative;float:left;}.header,.footer{height:50px;}.main{width:100%;height:200px;}.left{width:100px;高度：200px；margin-left:-100%;left:-100px;}.right{width:100px;高度：200px；左边距：-100px；右：-100px；}.clearfix::after{content：“”；显示：块；明确：两者；可见性：隐藏；高度：0；overflow:hidden;}双飞翼布局ps：“这不是同一张图吗？”“对！一样的，因为解决的是同一个问题。”[JsFiddle]https://jsfiddle.net/zwwill/5xjyeu9d/headermainleftright.col{float:left;}.header{height:50px;}.main{width:100%;}.main-wrap{margin:0100px0100px;height:200px;}.left{宽度：100px;高度：200px；margin-left:-100%;}.right{width:100px;高度：200px；.clearfix::after{内容：“”；显示：块；明确：两者；可见性：隐藏；高度：0；overflow:hidden;}无名布局自己乱来，简单的绝对定位就可以解决问题，何必圣杯和双飞翼你还要干嘛https://jsfiddle.net/zwwill/a...headermainleft右边footer.wrapper{position:relative;}.main{margin:0100px;}.left{position:absolute;左：0；top:0;}.right{位置:绝对;右：0；顶部：0；}如果您觉得本文对您有帮助，可以点击下方【点赞】收藏以备后用
