水平垂直居中、两栏布局、三栏布局

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

方法一 ：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

        

三栏布局: