Centering with Absolute Positioning

How would I center this Div using Absolute positioning? https://codepen.io/Matt-CopOffMatt/pen/MWZbNor I have tried the following:
left: 50%
top:50%;
left: 50%
top:50%;
transform: translate(50%,50%);
transform: translate(50%,50%);
Not entirely sure what else to try. Seems like it's taking the height/width into account which is resulting in a slight offset from center.
8 Replies
SeppeB
SeppeB16mo ago
inset:0; margin:auto; the inset is equal to top, bottom, left and right of 0, after that the margin auto will normally center the blob.
Matt
MattOP16mo ago
It can't be done with Transform / regular absolute positioning?
b1mind
b1mind16mo ago
Honestly I use grid
Matt
MattOP16mo ago
It's a standalone div atm I would normally center with flex/grid/margin, was curious to see if absolute positioning was possible Does it not take the height/width into account when moving? Seems like object was offset based on those values this works though 👍 thanks again
b1mind
b1mind16mo ago
right but I tend to just use grid with absolute it will still respect the parent telling it to center.
SeppeB
SeppeB16mo ago
pretty sure it's transform:translate(-50%,-50%) that should also work happy to help
b1mind
b1mind16mo ago
.grid {
position: relative;
display: grid;
}

.item {
position: absolute;
place-self: center; /* or put place-items* on parent */
}
.grid {
position: relative;
display: grid;
}

.item {
position: absolute;
place-self: center; /* or put place-items* on parent */
}
Matt
MattOP16mo ago
thank you too 👍
Want results from more Discord servers?
Add your server