<body>
	<div class="section text-h-center">
		<p>水平置中</p>
	</div>

	<div class="section text-v-center">
		<p>垂直置中</p>
	</div>

	<div class="section text-h-center text-v-center">
		<p>水平垂直置中</p>
	</div>
</body>
/* 文字水平置中 */
.text-h-center {
	text-align: center;
}

/* 文字垂直置中 */
.text-v-center {
	vertical-align: top;
}
.text-v-center:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}
.text-v-center p {
	display: inline-block;
}

/* 好看用 */
body {
	margin: 0;
	padding: 10px;
}
.section {
	display: inline-block;
	height: 200px;
	margin: 0;
	width: 32%;
	border: 1px solid #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.