CSS 垂直居中

一、position: relative

.content{
	width: 300px
	height: 300px;
	background: red;
}
.children {
	width: 100px
	height: 100px;
	background: orange;
	position: relative;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

<div class="content">
	<div children></div>
</div>

二、display: flex

.content{
	width: 300px
	height: 300px;
	background: red;
	display: flex;
}
.children {
	width: 100px
	height: 100px;
	background: orange;
	align-self: center; /* 垂直 */
	margin: 0 auto; /* 水平 */
}

<div class="content">
	<div children></div>
</div>