Vertical Aligning CSS Grid Items - html

Question

I am making my site's header mobile friendly using CSS grid. I searched for a way to align one of my columns vertically to the middle. This post answered that by making the column display: flex, but introduced a problem where when I hover over the link inside of the box, the box resizes and moves the text inside.
My Code:
h1 {
color: white;
font-family: garamond;
font-size: 3vw;
width: 90%;
line-height: 5%;
}
header {
background-color: darkred;
position: relative;
padding: 1px;
padding-bottom: 1em;
}
.Logo-Master {
width: 15vw;
margin: 1em;
}
header h1 {
color: white;
}
#newsCenter {
text-align: center;
font-size: 1vw;
color: white;
text-decoration: none;
}
#newsCenter p a {
color: white;
font-size: .9vw;
font-weight: normal;
}
#newsCenter p a:hover {
font-weight: bold;
}
.newsCenterValues {
font-size: 1em;
}
<header style="display: grid; grid-template-rows: auto auto;">
<div style="display: inline-grid; grid-template-columns: 1fr 4fr 1fr">
<img class="Logo-Master" src="https://static.nationalgeographic.co.uk/files/styles/image_3200/public/01-lion-populations-nationalgeographic_1777804.jpg?w=1600&h=900" alt="This is an image">
<div>
<h1>Title Title Title Title Title Title Title Title</h1>
</div>
<div style="display: flex; align-items: center;"><div id="newsCenter">
<p style="font-size: 1.2rem; font-weight: bold; color: white; line-height: 0;">Flex</p>
<p class="newsCenterValues" style="line-height: 0;">The Long Link that in this section</p>
</div></div>
</div>
</header>
The text within the flex column is supposed to be text-align: center; but it is not behaving like that. How can I fix this with it still becoming bold when I hover over it?

Answer 1

h1 {
color: white;
font-family: garamond;
font-size: 3vw;
width: 90%;
line-height: 5%;
}
header {
background-color: darkred;
position: relative;
padding: 1px;
padding-bottom: 1em;
}
.Logo-Master {
width: 15vw;
margin: 1em;
}
header h1 {
color: white;
}
#newsCenter {
text-align: center;
font-size: 1vw;
color: white;
text-decoration: none;
}
#newsCenter p a {
color: white;
font-size: .9vw;
font-weight: normal;
}
#newsCenter p a:hover {
font-weight: bold;
}
.newsCenterValues {
font-size: 1em;
}
<header style="display: grid; grid-template-rows: auto auto;">
<div style="display: inline-grid; grid-template-columns: 1fr 4fr 1fr">
<img class="Logo-Master" src="https://static.nationalgeographic.co.uk/files/styles/image_3200/public/01-lion-populations-nationalgeographic_1777804.jpg?w=1600&h=900" alt="This is an image">
<div>
<h1>Title Title Title Title Title Title Title Title</h1>
</div>
<div style="display: flex; align-items: center;justify-content: center;"><div id="newsCenter">
<p style="font-size: 1.2rem; font-weight: bold; color: white; line-height: 0;">Flex</p>
<p class="newsCenterValues" style="line-height: 0;">The Long Link that in this section</p>
</div></div>
</div>
</header>

Answer 2

This will not shift the content. In this example, I used transform: scale().
h1 {
color: white;
font-family: garamond;
font-size: 3vw;
width: 90%;
line-height: 5%;
}
header {
background-color: darkred;
position: relative;
padding: 1px;
padding-bottom: 1em;
}
.Logo-Master {
width: 15vw;
margin: 1em;
}
header h1 {
color: white;
}
#newsCenter {
text-align: center;
font-size: 1vw;
color: white;
text-decoration: none;
transition: .2s;
}
#newsCenter p a {
color: white;
font-size: .9vw;
font-weight: normal;
}
#newsCenter:hover {
transform: scale(1.1);
}
.newsCenterValues {
font-size: 1em;
}
<header style="display: grid; grid-template-rows: auto auto;">
<div style="display: inline-grid; grid-template-columns: 1fr 4fr 1fr">
<img class="Logo-Master" src="https://static.nationalgeographic.co.uk/files/styles/image_3200/public/01-lion-populations-nationalgeographic_1777804.jpg?w=1600&h=900" alt="This is an image">
<div>
<h1>Title Title Title Title Title Title Title Title</h1>
</div>
<div style="display: flex; align-items: center;"><div id="newsCenter">
<p style="font-size: 1.2rem; font-weight: bold; color: white; line-height: 0;">Flex</p>
<p class="newsCenterValues" style="line-height: 0;">The Long Link that in this section</p>
</div></div>
</div>
</header>