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

创建一个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;
}