Bifalgorithm post

"This is what position and translate actually do, and why you almost always need both together. Here is a box inside a container. No positioning yet. Add position absolute, top 50%, and left 50%. The box moves, but it is not centered. That is because top and left move the top left corner of the box to the center, not the box itself. Add translate minus 50% minus 50%. The box snaps to the true center. Translate shifts the element back by 50% of its own width horizontally, and 50% of its own height. vertically, placing its center exactly at the target point. Now a real-life example, a modal. Add position fixed, then top 50% and left 50%. The top left corner hits the center but the modal is still off. Add translate minus 50% minus 50% and it snaps perfectly to the center of the screen, every time, no matter the size. That is why position and translate are almost always used together. Save this."

"This is what position and translate actually do, and why you almost always need both together. Here is a box inside a container. No positioning yet. Add posit…