SOURCE

<div class="wrap">
	<div class="set app1">
		水平居中
	</div>
</div>
<br />
<div class="wrap">
	<div class="set app2">
		已知宽高水平垂直居中1
	</div>
</div>
<br />
<div class="wrap">
	<div class="set app3">
		已知宽高水平垂直居中2
	</div>
</div>
<br />
<div class="wrap">
	<div class="app4">
		未知宽高水平垂直居中3
	</div>
</div>
<br />
<div class="wrap flex-wrap">
	<div class="set app5">
		已知宽高水平垂直居中4
	</div>
	<div class="set app5">
		已知宽高水平垂直居中402
	</div>
</div>

.wrap{
	width:300px;
	height:300px;
	border:1px solid red;
	position:relative;
}
.set{
	width:100px;
	height:100px;
	background:blue;
}

.app1{
	margin:0 auto;
}

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

.app3{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
}

.app4{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	padding:20px;
	background-color:red;
}

.flex-wrap{
	display:flex;
	align-items:center; /*垂直居中*/
	justify-content: center; /*水平居中*/
}