一、左右布局
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;