【面试常考】CSS实现水平垂直居中

1.margin:0 auto法

//父元素
.container {
	position:relative;
	......
}
//子元素
.container_item {
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	margin:0 auto;
	......
}

2.margin:auto法

//父元素
.container {
	position:relative;
	......
}
//子元素
.container_item {
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	......
}

3.弹性盒子法

//父元素
.container {
	display:flex;
	align-items:center;
	justify-content:center;
	......
}
//子元素
.container_item {
	display:inline-block;
	......
}

4.绝对定位法

//父元素
.container {
	position:relative;
	......
}
//子元素
.container_item {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-(width / 2)
	margin-top:-(height / 2)
	......
}

5.table-cell法

//父元素
.container {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	......
}
//子元素
.container_item {
	display:inline-block;
	......
}

6.绝对定位+css变换

//父元素
.container {
	position:relative;
	......
}
//子元素
.container_item {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%，-50%);
	......
}