水平垂直居中的几种常见实现方式

案例布局1

<style tyle='text/css'>
	.parent {
		width: 500px;
		height: 500px;
		border: 1px solid #ccc;
	}
	.child {
		width: 200px;
		height: 200px;
		border: 1px solid #00f;
	}
</style>
<div class='parent'>
	<div class='child'>
	</div>
</div>

案例布局2

<style type='text/css'>
.parent {
	width: 500px;
	height: 500px;
	border: 1px solid #ccc;
	display: table;
}
.child {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.cell {
	width: 200px;
	height: 200px;
	border: 1px solid #00f;
	display: inline-block;
}
</style>
<div class="parent">
	  <div class="child">
	  	<div class="cell"></div>
	  </div>
</div>	

实现效果展示

代码实现方式

1.display: flex

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

2.position

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

3.display: grid

.parent {
	display: grid;
}
.child {
	justify-self: center;
	align-self: center;
}

4.after伪元素

.parent {
	text-align: center;
}
.parent:after {
	content: '';
	height: 100%;
}
.parent:after, .child {
	display: inline-block;
	vertical-align: middle;
}

5.display: flex 配合 margin

.parent {
	display: flex;
}
.child {
	margin: auto;
}

6.display: table (见案例布局2)

7.display: table-cell

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

8.position

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}