Writing like this does not center an element horizontally and vertically. It can only make the element translate half of its own width in the positive direction of the x-axis and y-axis at the current position.
I answered a question before. You can take a look at it. It may be of some help.
Writing like this cannot be directly centered, but can be positioned, and then left:50%; At this time, the positioning origin is the positioning element of the parent layer, and then use translateX(-50%); at this time, it is moved to the left relative to the element itself. Half, the final effect is exactly centered.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Writing like this does not center an element horizontally and vertically. It can only make the element translate half of its own width in the positive direction of the x-axis and y-axis at the current position.
I answered a question before. You can take a look at it. It may be of some help.
translate
Writing like this cannot be directly centered, but can be positioned, and then left:50%; At this time, the positioning origin is the positioning element of the parent layer, and then use translateX(-50%); at this time, it is moved to the left relative to the element itself. Half, the final effect is exactly centered.