实现一个元素水平垂直居中的方法★★★★

重要程度★★★★

1.absolute + 负margin

.parent {
	position:relative;
}
.son {
	position:absolute;
	left:50%;
	top:50%;
	width:100px;
	height:100px;
	margin-left:-50px;
	margin-top:-50px;
}

2.absolute + margin auto

.parent {
	position:relative;
}

.son {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
}

3.flex

.parent {
	display:flex;
	align-items:center;
	justify-content:center;
}

4.absolute + calc

.parent {
	position:relative;
}
.son {
	position:absolute;
	width:100px;
	height:100px;
	left:calc(50% - 50px);
	top:calc(50% - 50px);
}

5.absolute + transform

.parent {
	position:relative;
}
.son {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

6.css-table

.parent {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
.son {
	display:inline-block;
}

7.grid

.parent {
	display:grid;
}

.son {
	align-self:center;
	justify-self:center;
}

福利来啦 跨越山海去拥抱你，你的付出不会被辜负，前端路一起加油。 扫码回复资料可以领10g前端资料，也可回复加群，加入交流群。

另有github每日更新精选面试题欢迎star github.com/qdleader/qd…