CodePen Embed - 區塊垂直置中 Flex

<body>
	<div class="section">
		<div class="section-middle"></div>
	</div>
</body>

/* 父容器 */
.section{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
}

/* 目標容器 */
.section-middle {
	/* 寬高 */
	width: 50%;
	height: 200px;
	
	/* 外框 */
	border: 1px solid #000;
}

This Pen is owned by Ted Liou on CodePen.

See more by @tedliou on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.