<!DOCTYPE html>
<html>
<body>
<style>
.title {
font-size: 18px;
}
.container {
background-color: lightblue;
width: 300px;
height: 300px;
}
.content {
font-size: 16px;
font-weight: 600;
}
</style>
<h1 class="title">table</h1>
<section class="container" style="display:table-cell; vertical-align: middle;">
<div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
</section>
<h1 class="title">grid</h1>
<section class="container" style="display:grid; align-items: center;">
<div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
</section>
<h1 class="title">transform</h1>
<section class="container" style="position: relative;">
<div class="content" style="position: absolute; top: 50%; transform: translateY(-50%);">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
</section>
<h1 class="title">flex</h1>
<section class="container" style="display: flex; align-items: center;">
<div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
</section>
</body>
</html>原文：https://www.cnblogs.com/ljwk/p/11913616.html