There is an interesting transform: translate(-50%, -50%); in CSS: transform: translate(-50%, -50%); . Allows you to position the element exactly in the center of the screen, if as a result of applying the centering type text-align: center he was slightly shifted.

How does this conversion work? If you pass arguments like (1, 2) to it, the element will be offset by such a number of pixels. What do percentages mean? What are they counted from?

    1 answer 1

    Arguments are delta along the X and Y axes respectively. 50% is 50% of the size of the element centered. When positioning: absolute; left: center; top: center; The center is the left upper point of the element. Therefore, it has to move half the size.