创建一个BFC，高度坍塌、居中、margin重合问题均可解决
1、 浮动元素float不为none
2、 绝对定位或固定定位：position:absolute/fixed
3、 行内元素：display:inline-block;
4、 overflow不为visible的块级元素
5、 display值为flow-root、表格单元素table-cell、表格标题table-caption
6、 匿名表格单元格元素
1、水平居中
块级元素
方法一：auto
注意：该元素不可浮动、绝对定位、固定定位
margin: 0 auto;
方法二：calc 注意：两个数值之间必须有空格
position: relative / absolute / fixed;
left: calc(50% - 元素宽的一半px); 四则运算
top: calc(50% - 元素高的一半px); 垂直居中
方法三：弹性盒子
父级元素属性
display: flex; 弹性盒子
flex-direction: row; 主轴方向为水平方向，起点在左端
justify-content:center;
方法四：定位
position: absolute;
left: 50%;
margin-left: -元素的一半宽px; / transform: translate(-50%,0);
2D变换中的属性，延x轴移动自身的-50%
行内元素
text-align: center; /* 父元素 */
注意：calc低版本IE不支持
2、垂直居中
行内元素：父级元素属性，并且父级元素必须是块元素
方法一（多行文本失效）：这个只表示某一行当中的垂直居中
line-height:父元素的高; 将字体高度调整为div的高度
vertical-align: bottom; 暂未理解，底部对齐
方法二（IE8不支持）：
父元素相对定位 relative，必须有固定高度，子元素绝对定位absolute
子元素属性
top: 50%;
transform: translate(0,-50%); / calc(50% - 一半高度) /margin-top: -（一半高度）;
方法三：弹性盒子（兼容性问题，IE不支持，移动端浏览器都支持）
原理：交叉轴上的内容在轴上居中
父类属性
display: flex;
align-items:center;(垂直居中)
块级元素
方法一：弹性盒子
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
方法二：弹性盒子
父元素：display:flex;
子元素：align-self:center;
方法三：vertical-align，IE不兼容
父元素{
display: table-cell / inline-block;
vertical-align: middle;
}
方法四：绝对定位
父元素relative
子元素{
position: absolute;
top: 50%;
margin-top: -自身高度的一半;
}
方法五：伪元素before
父元素::before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
子元素 {
display: inline-block;
vertical-align: middle;
}
方法六：transformY
子元素{
position: relative;
top: 50%;
transform: translateY(-50%);
}
3、高度坍塌
方法一：使父元素浮动 float
方法二：清除浮动 clear:both;
方法三：给父级元素固定宽高
方法四：给父元素添加overflow：hidden;
方法五：万能清除法：after伪元素+清除浮动html部分
父元素::after {
content: '';
height: 0;
clear: both;
display: block;
}