Kevin Powell - Community•2y ago

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>

2 Replies

Mannix•2y ago

grid on parent and margin: auto on child seems to center the child horizontally and vertically 👀 place-content: center; on parent will achieve same result I learned something new today thanks 😄

lkoOP•2y ago

@mannix_ Thanks

Gaming

Programming

Why grid centers element?