mat-button-toggle-group text is not centering when increasing height of the buttons

Question

So I have been working on something and wanted to use mat-button-toggle-group and I faced an issue with it that the text inside the button don't center when we increase the height of the buttons.

I want to make the text in the button group remain always in the center vertically. Whatever the height of the button group.

Is there any way to do that?

app.component.html

<div class="parent-div">
  <mat-button-toggle-group class="child-mat-button-group" name="favoriteColor" aria-label="Favorite Color">
    <mat-button-toggle value="red" class="individual-button1">Red</mat-button-toggle>
    <mat-button-toggle value="green" class="individual-button2">Green</mat-button-toggle>
    <mat-button-toggle value="blue" class="individual-button3">Blue</mat-button-toggle>
  </mat-button-toggle-group>
</div>

app.component.css

.parent-div {
  height: 50%;
}
.child-mat-button-group {
  height:100%;
}
.individual-button1 {
  border:1px solid red;
}
.individual-button2 {
  border:1px solid green;
}
.individual-button3 {
  border:1px solid blue;
}

edit: Added this in app.component.css

.parent-div {
  height: 20%;
}
mat-button-toggle {
  display: flex;
}

Answer 1

add this to your css:

mat-button-toggle {
    display: flex;
    align-items: center;
}

Answer 2

please update this and try to run and check

mat-button-toggle{
display: flex;
align-items: center;
justify-content: center;}