CSS常见布局解决方案

水平居中布局

1.margin + 定宽

  
Demo

相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的

2. table + margin

  
Demo

display: table 在表现上类似 block 元素，但是宽度为内容宽。

• 无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为

  3.inline-block + text-align

  
    
  Demo
  
  
  

  • 兼容性佳（甚至可以兼容 IE 6 和 IE 7）

  4. absolute + margin-left

  
    
  Demo
  
  
  

  • 宽度固定

  • 相比于使用transform ，有兼容性更好

  5. absolute + transform

  
    
  Demo
  
  
  

  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。

  • transform 为 CSS3 属性，有兼容性问题

  6. flex + justify-content

  
    
  Demo
  
  
  

  • 只需设置父节点属性，无需设置子元素

  • flex有兼容性问题

  垂直居中

  1.table-cell + vertical-align

  
    
  Demo
  
  
  

  • 兼容性好(IE 8以下版本需要调整页面结构至 table

  2.absolute + transform

  强大的absolute对于这种小问题当然也是很简单的

  
    
  Demo
  
  
  

  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

  • transform 为 CSS3 属性，有兼容性问题
    同水平居中，这也可以用margin-top实现，原理水平居中

  3.flex + align-items

  如果说absolute强大，那flex只是笑笑，因为，他才是最强的。。。但它有兼容问题

  
    
  Demo
  
  
  

  水平垂直居中

  1. absolute + transform

  
    
  Demo
  
  
  

  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。

  • transform 为 CSS3 属性，有兼容性问题

  2. inline-block + text-align + table-cell + vertical-align

  
    
  Demo
  
  
  

  • 兼容性好

  3. flex + justify-content + align-items

  
    
  Demo
  
  
  

  • 只需设置父节点属性，无需设置子元素

  • 蛋疼的兼容性问题

  一列定宽，一列自适应

  1.float + margin

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：

  
    
  
      
  left
    
    
  
      
  
        
  right
        
  right
      
    
  
  
  

  此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。
傲娇的程序员应该放弃太低版本的浏览器

  2.float + overflow

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6

  3 .table

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

  4. flex

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  • 低版本浏览器兼容问题

  • 性能问题，只适合小范围布局
    我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应 这里我们不一一讲解，大家自行尝试，也可以巩固前面学习的

  等分布局

  1. float

  
    
  
      
  1
    
    
  
      
  2
    
    
  
      
  3
    
    
  
      
  4
    
  
  

  • 此方法可以完美兼容 IE8 以上版本

  2. flex

  
    
  
      
  1
    
    
  
      
  2
    
    
  
      
  3
    
    
  
      
  4
    
  
  
  
  

  • 强大简单，有兼容问题

  3. table

  
    
  
      
  
        
  1
      
      
  
        
  2
      
      
  
        
  3
      
      
  
        
  4
      
    
  
  
  

  等高布局

  1.table

  table 的特性为每列等宽，每行等高可以用于解决此需求

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  2.flex

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch

  3. float

  
    
  
      
  left
    
    
  
      
  right
      
  right
    
  
  
  

  此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

  到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差 傲娇的程序员应该放弃太低版本的浏览器
转自：CSS常见布局解决方案