Html Flexbox-垂直对齐块和文本

我想要一个侧面有

按钮的
h2
，如下图所示：


我尝试了
flexbox
，但是通过将
按钮居中，它不再充满整个高度


标题{
显示器：flex；
背景颜色：蓝色；
颜色：白色；
边缘底部：2米；
}
.校长1{
对齐项目：居中；
}
.按钮{
左边距：自动；
背景颜色：黄色；
}

文本居中，但按钮不是全高
按钮全高但文本未居中
使您的
按钮也成为
flexbox
，并使用
对齐项目：居中对齐-请参见下面的演示：


标题{
显示器：flex；
背景颜色：蓝色；
颜色：白色；
边缘底部：2米；
}
.校长1{
对齐项目：居中；
}
.按钮{
左边距：自动；
背景颜色：黄色；
显示器：flex；
对齐项目：居中；
}

按钮全高但文本未居中

标题{
显示器：flex；
背景颜色：蓝色；
颜色：白色；
边缘底部：2米；
}
.header1{对齐项目：居中；}
.按钮{
左边距：自动；
背景颜色：黄色；
显示：块；
垂直对齐：中间对齐；
线高：30px；
位置：相对位置；
填充：0 10px；
}
跨度{
显示：块；
身高：50%；
利润上限：-15px；
}

文本居中，但按钮不是全高
按钮全高但文本未居中
太好了，我不知道解决方案会这么简单。我有很多关于flexbox的知识需要学习。我正要点击发布你的答案，我看到了你的答案。：）谢谢你的回答。但这种方式并不干净，因为每当标题大小改变时，我都需要更改大小