CodePen Embed - 區塊垂直置中 top: 50%

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

/* 父容器 */
.section{
	height: 100vh;
}

/* 目標容器 */
.section-middle {
	/* 寬高 */
	width: 50%;
	height: 200px;
	
	/* 絕對定位 */
	position: absolute;
	
	/* 水平與垂直定位 */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	
	/* 外框 */
	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.