前端元素垂直水平居中的多个方法

创建一个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、水平垂直居中

方法一：
父元素 {position: relative;
}
子元素 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}方法二：
父元素{position: relative;height: 50px;
}子元素 {position: absolute;top: 50%;left: 50%;margin-top: -25px;margin-left: -25px;
}方法三：
父元素{display: flex;justify-content: center;align-items: center;
}

4、高度坍塌

方法一：使父元素浮动 float
方法二：清除浮动 clear:both;
方法三：给父级元素固定宽高
方法四：给父元素添加overflow：hidden;
方法五：万能清除法：after伪元素+清除浮动html部分

父元素::after {  content: '';height: 0;clear: both;display: block;
}