Flexbox - Vertically align both blocks and text - html

Question

I want h2 with a button on the side like seen in the picture below:
I tried flexbox, but by centering the button, it doesn't fill full height anymore.
header {
display: flex;
background-color: blue;
color: white;
margin-bottom: 2em;
}
.header1 {
align-items: center;
}
.button {
margin-left: auto;
background-color: yellow;
}
<header class="header1">
<h2>Text centered but Button not full Height</h2>
<a class="button" href="https://google.com">Read More</a>
</header>
<header class="header2">
<h2>Button full height but Text not centered</h2>
<a class="button" href="https://google.com">Read More</a>
</header>
Is there a way to achieve as pictured? I want to avoid adding Padding or fixed height to the button because then I need to adapt it for multiple media queries.

Answer 1

Make your button a flexbox too and vertically align using align-items: center - see demo below:
header {
display: flex;
background-color: blue;
color: white;
margin-bottom: 2em;
}
.header1 {
align-items: center;
}
.button {
margin-left: auto;
background-color: yellow;
display: flex;
align-items: center;
}
<header class="header2">
<h2>Button full height but Text not centered</h2>
<a class="button" href="https://google.com">Read More</a>
</header>

Answer 2

header {
display: flex;
background-color: blue;
color: white;
margin-bottom: 2em;
}
.header1 { align-items: center; }
.button {
margin-left: auto;
background-color: yellow;
display:block;
vertical-align:middle;
line-height:30px;
position:relative;
padding:0 10px;
}
a span {
display:block;
height:50%;
margin-top:-15px;
}
<header class="header1">
<h2>Text centered but Button not full Height</h2>
<a class="button" href="https://google.com">Read More</a>
</header>
<header class="header2">
<h2>Button full height but Text not centered</h2>
<a class="button" href="https://google.com"><span></span>Read More</a>
</header>