An implementation method of CSS3 Vertical Center

The translate () function moves the element in the specified direction, similar to the relative in position. Or, in simple terms, using the translate () function, you can move an element from its original position without affecting any Web component on the x or Y axis.

1. top:50%,left:50%, the upper left corner of the color block is positioned in the center of the screen, but the whole is not in the center;

2. The percentage of translate is determined according to its width and height, translate ( -50%,-50%) Coordinate with top:50%,left:50% to achieve the center

The following is a search on the internet for translate and position:

Same point: Both are relative to their own mobile position

Difference:

1, when the element has already position:absolute, at this time you want to move relative to itself, you can use translate

2, do animation time translate more suitable, will not cause the page rearrangement and redraw

3, regarding the transform class, can use the GPU acceleration, enhances the browser the performance. In short: Transform more suitable for animation

Source:

<! DOCTYPE html>