css center positioning of known width and height

1. Known width and height. In the

above figure, we want to center the "service range" with a known width. We can first choose left or right style. Here we choose left, and 50% here refers to this The leftmost part of the box is located at fifty percent of the horizontal position, which is the middle position. Because we know the overall width, we can directly use half of the leftward width, which is margin-left: -175px; As shown in the figure below, it is horizontally centered after saving and refreshing.

2. Unknown width and height

of the scrolling dot in the picture above. We don’t know its length and width. First of all, let its leftmost position be 50% of the picture (left: 50%;), and the most important is the bottom transform, translate are displacement properties.
1.translateX(x): The unit of the distance moved by the element in the horizontal direction is expressed by px and percentage. When x appears positive, it means the element moves to the right in the horizontal direction. When x is negative, it means the element Move to the left
2.translateY(y): x is moving in the horizontal direction and y is moving in the vertical direction. When
y has a positive value, it means that the element is moving downwards. If a negative value appears, it means it is upwards. Moving is contrary to our normal thinking.
3.translate(x,y)
Through this, we can make it centered. The
following picture is the vertical centering

PS: In addition, there are many centering methods
1. Multi-block-level elements are centered horizontally
Single-line text is centered vertically

2. Block-level elements are centered horizontally

3. Inline elements are centered horizontally.
4. Block-level elements are centered horizontally.
By setting the margin-left and margin-right of fixed-width block-level elements to auto, the block-level elements can be centered horizontally.
5. Use flexible layout (flex)
6. Set the height of the inline element to be equal to the line-height, so that the element is vertically centered