Why grid centers element?

I wrote this code and I achieved what I wanted but I dont know why I did what I did, so, that's the code, and when I added "display: grid" and "margin:auto" the circle centered both vertically and horizontally of its parent, horizontally, because there's margin: auto, but why vertically?

.parent {
    display:  flex;
    flex-direction: row;
    gap: 10px;
}
.parent > div {
    width: 50px;
    height: 50px;
    border: 1px red solid;
    flex-shrink: 0;
    display: grid;
}
.parent > div > div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px red solid;
    margin: auto;
}

.parent {
    display:  flex;
    flex-direction: row;
    gap: 10px;
}
.parent > div {
    width: 50px;
    height: 50px;
    border: 1px red solid;
    flex-shrink: 0;
    display: grid;
}
.parent > div > div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px red solid;
    margin: auto;
}

        <div class="parent">
            <div><div></div></div>
            <div><div></div></div>
        </div>

        <div class="parent">
            <div><div></div></div>
            <div><div></div></div>
        </div>

Mannix•1/6/23, 7:43 PM

grid on parent and margin: auto on child seems to center the child horizontally and vertically

Mannix•1/6/23, 7:44 PM

on parent will achieve same result

Mannix•1/6/23, 7:45 PM

I learned something new today thanks

lkoOP•1/6/23, 7:46 PM

@mannix_ Thanks