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

1.margin:auto法

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

2.弹性盒子法

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

3.绝对定位法

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

4.table-cell法

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

5.绝对定位+css变换

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

你的点赞是对我最大的鼓励，ღ( ´･ᴗ･` )比心