I've seen other questions asking about why there centered div is slightly off-center, but this is different. Questions are saying to set padding to 0, but it isn't working, and I think it could be due to the absolute position. A few other things i tried here
Does anyone know why this would be happening? I'm using an absolute-positioned dot in a flexbox.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .slider { width: 20px; height: 100px; display: flex; flex-direction: column; justify-content: space-evenly; position: relative; border: 2px solid black; border-radius: 2cqw; } .line { border-bottom: 2px solid black; } .selector { background-color: black; border-radius: 50%; position: absolute; width: 20px; aspect-ratio: 1 / 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }</style></head><body><div class="slider"><div class="selector"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></body></html>