我有一个带有标题和一些内容的页面。标头是一个动态值，根据内容可以有很多不同的内容。当标题较长并且需要两行或更多行时，就会出现此问题。由于我希望内容保持在相同的垂直和水平位置，因此如果标题较短，我希望较长标题的最后一行与第一行处于相同的垂直位置。
我希望我能让别人理解我自己。 请尝试通过添加第二个单词来编辑标题，您就会明白我的意思。
我认为这个问题可以用 flex-box 来解决，但我不知道如何解决，我已经用 flex-end 等尝试了很多不同的东西。
这是我的代码示例：
.main {
display: flex;
justify-content: center;
min-height: 200px;
border: 1px solid black;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid red;
width: 200px;
height: 300px;
padding-top: 20px;
gap: 20px;
}
.header-div {
display: flex;
border: 1px solid blue;
align-items: center;
text-align: center;
max-width: 100px;
}
.header {
border: 1px solid green;
}
.content {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="wrapper">
<div class="header-div">
<h1 className="header">Header</h1>
</div>
<div class="content">Test</div>
</div>
</div>
</body>
</html>
提前致谢！
编辑 这是一张制作不佳的图像，它说明了我的目标。 左图是标题占据一行时的情况，第二张图是标题占据两行时的情况：
更改 .wrapper 类的 CSS：
.wrapper { display: grid; grid-template-rows: auto 1fr; align-items: center; justify-items: center; border: 1px solid red; width: 200px; height: 300px; padding-top: 20px; gap: 20px; }在这里，我们使用 display: grid 来创建网格布局。 grid-template-rows 属性定义两行：一行用于标题，另一行用于内容。 auto 值将使标题行调整到内容高度，而 1fr 值将使内容行占用剩余空间。 align-items 和 justify-items 属性使内容在各自的行中居中。
现在，更新您的 HTML，使 h1 元素具有 class 属性，而不是 className 属性：
Header
通过这些更改，标头将保留在包装器的顶部，并且内容将保持在相同的垂直和水平位置，无论标头的长度如何。您可以通过更改标题文本来测试它，看看它在不同长度下的表现如何。