4 replies

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>

KP-C

Kevin Powell - Community•4y ago•

4 replies

lko

Why grid centers element?

.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>

Why grid centers element?

Similar Threads

Why grid centers element?

Similar Threads

Similar Threads

Similar Threads