2025年1月1日小于 1 分钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>不满一屏时垂直居中，超过一屏时顶端对齐</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100vh;
}
.wrapper:before,
.wrapper:after {
content: "";
display: block;
flex: 1;
}
h3 {
background: #ccc;
margin: 16px 0;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
</div>
</div>
</body>
</html>