flex

 
 

  
  子元素在父元素中水平垂直居中

 
 
 
 


 
 
 
 

  
  .dad {
 
 
 
 

  
      display: flex;
 
 
 
 

  
      justify-content: center;
 
 
 
 

  
      align-items: center
 
 
 
 

  
  }
 
 
 
 


 
 
 
 

  
  
 
任何一个容器都可以指定为Flex布局。

      
      
           
           

            
            1
           
           
           
           

            
            2
           
           
           
           

            
            3
           
           
           
           

            
            .box {
           
           
           
           

            
            	display: flex;
           
           
           
           

            
            }
           
           
行内元素也可以使用Flex布局：

      
      
           
           

            
            1
           
           
           
           

            
            2
           
           
           
           

            
            3
           
           
           
           

            
            .box {
           
           
           
           

            
            	display: inline-flex
           
           
           
           

            
            }
           
           
Webkit内核的浏览器需加上-webkit前缀。
注意：
设为Flex布局后，子元素的float、clear、vertical-alian属性都将失效。