本文共 805 字，大约阅读时间需要 2 分钟。

水平垂直居中的问题 （四种方法）

方法一 ：position布局，position设为absolute

给定高度，通过绝对定位方式居中width: x;height: y;position: absolute; left: 50%;top: 50%;margin-left: -(x/2);margin-top: -(y/2);
   

方法二 ：display：table

父级元素：{ display:table;} 子级元素： { display:table-cell;vertical-align:middle } 代码：      
   
           
    
     2222
    
      
   
      

方法三 ：flex布局

父级元素：{ display:flex;flex-direction:row;justify-content:center;align-items:center;} 子级元素：{flex:1} 代码：      
   
           
    
     我是中间的div1
    
      
   
      

方法四 ：transform 位移布局

父级元素：{ position: relative;} 子级元素：{ position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);} 代码：      
   
           
    
     我是中间的div1
    
      
   
      

两栏布局: 左边固定,右边自动

方法一：浮动

方法二：flex 弹性布局

方法三：table方法

方法四：css计算宽度calc

两栏布局: 左右固定

   
    123
   
    
   
    234
   
    

三栏布局:

转载地址：http://mzylf.baihongyu.com/