CSS布局

一、左右布局

1、利用浮动float

给要并排的子元素均向左浮动，中间需加空隙的可以给一个margin值，再给所有浮动的子元素的父元素加上类clearfix。

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}

2、利用绝对定位

将要并排的子元素进行绝对定位，如果子元素是块级元素，记得给子元素设置为：display: inline-block;还要注意给其父元素加上相对定位。
排在左边的子元素：

display:inline-block;    //如果该元素是块级元素的话
position:absolute;
left:0;

display:inline-block;
排在右边的子元素：

display:inline-block;    //如果该元素是块级元素的话
position:absolute;      
right:0

二、左中右布局

1、利用浮动float

让左边子元素向左浮动float: left;让右边的子元素向右浮动float: right;
位于中间的子元素可以通过设置margin值找到其中心的位置，仍然要给所有浮动的子元素的父元素加上类clearfix。

2、利用绝对定位

将要并排的子元素进行绝对定位，如果子元素是块级元素，记得给子元素设置为：display: inline-block;还要注意给其父元素加上相对定位。处于中间的那个元素注意根据父元素的宽度设置它的left值。

三、水平居中

1、margin: 0 auto;

对子框设置display:inline-block;margin:0 auto;

2、text-align: center;

对子框设置display:inline-block;对父框设置text-align:center;。

3、absolute + transform

对父框设置position:relative;对子框设置position:absolute;left:50%; transform : translateX(-50%);

4、flex + justify-content

对父框设置display:flex; justify-content:center;

四、垂直居中

1、vertical-align:middle

对父框设置display:table-cell; vertical-align:middle;

2、absolute + transform

对父框设置position:relative;对子框设置position:absolute;top:50%; transform : translateY(-50%);

3、flex + align-items

对父框设置display:flex; align-items:center;

五、水平 + 垂直  居中

（1）脱离文档流的方法

1、margin: auto;

对父框设置position:relative;对子框设置position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;

2、absolute+ transform

对父框设置position:relative;对子框设置position:absolute;top:50%;left:50%; transform : translate(-50%,-50%);

（2）未脱离文档流的方法

1、table-cell + vertical-align + text-align

对父框设置display: table-cell; vertical-align: middle; text-align: center;

2、flex + justify-content + align-items

对父框设置display: flex; align-items: center; justify-content: center;