关于居中布局

1.水平居中

方案一：inline-block + text-align

  
    

      
我们想左对齐
我们想左对齐123
我们想左对齐123

    
  

效果图如下

image.png

解读：因为当 text-align: center; 设置在一个块级元素上的时候可以对里面的 inline 级别的元素起作用，child 我们把 display 设置成了 inline-block, 所以父元素设置了 center 自然就居中了。

注：由于 text-align 会继承的，所以子元素里的 text-align 也是 center 了，那如果我想设置子元素里的文本是左对齐的，那么只要将 child 里设置 text-align: left; 覆盖即可。

方案二：table + margin

  
    

      
我们想左对齐
我们想左对齐123
我们想左对齐123

    
  

效果图同方案一

解读：当设置为 table 时，如果没有对 table 设置宽度 100%，那么宽度就是和内容一样；table 另一个特性就是可以应用 margin 属性，所以设置了 margin: 0 auto; 即可实现。

方案三：absolute + transform

  
  
    

      
我们想左对齐
我们想左对齐123
我们想左对齐123

    
  

方案四：flex + justify-content

  
    

      
我们想左对齐
我们想左对齐123
我们想左对齐123

    
  

2. 垂直居中

方案一：table-cell + vertical-align

  
    

      

        Demo
      
    
  

效果图：

image.png

方案二：absolute + transform

 
  
    

      

        Demo
      
    
  

方案三：flex + align-items

  
    

      

        Demo
      
    
  

3. 水平垂直居中（结合即可）

方案一：inline-block + text-align + table-celln + vertical-align

  
    

      

        Demo
      
    
  

方案二：absolute + transform

  
    

      

        Demo
      
    
  

方案三：table-cell + vertical-align + align-items

  
    

      

        Demo