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
SeppeB2y 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
MattOP2y ago
It can't be done with Transform / regular absolute positioning?
b1mind
b1mind2y ago
Honestly I use grid
Matt
MattOP2y 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
b1mind2y ago
right but I tend to just use grid with absolute it will still respect the parent telling it to center.
SeppeB
SeppeB2y ago
pretty sure it's transform:translate(-50%,-50%) that should also work happy to help
b1mind
b1mind2y 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
MattOP2y ago
thank you too 👍

Did you find this page helpful?