水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式

    
    



    
水平居中: 给div设置一个宽度, 然后添加 margin:0 auto 属性
    
水平居中: 让绝对定位的 div 居中
    
水平垂直居中: 受限于容器的宽高, 设置层的外边距
    
水平垂直居中: 不受限于容器的宽高, 利用 `transform` 属性 (2D 或 3D 转换)
    
  
    
水平垂直居中: 使用 display 中的 flex 布局 (与 float 或 position 混用会被破坏)
    
垂直居中: 使用 display 中的 table-cell 值 (与 float 或 position 混用会被破坏)

result.png