<div class="parent flex">
<div></div>
</div>
<div class="parent grid">
<div></div>
</div>
<div class="parent margin">
<div></div>
</div>
<div class="parent position">
<div></div>
</div>
body {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.parent {
border: black solid 3px;
width: 20vw;
aspect-ratio: 1;
div {
border: red solid 2px;
width: 5vw;
aspect-ratio: 1;
background-color: red;
border-radius: 50%;
}
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.grid {
display: grid;
place-items: center;
}
.margin {
display: flex;
div {
margin: auto;
}
}
.position {
position: relative;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.