Center a Div with JavaScript and change it as the page size changes_javascript tips

When using Java as the backend, I always create a login page, but my page is too ugly. It needs to be centered but not centered, and it needs to be colored but not colored. But no matter what, the login box must be centered! The previous idea was to center the div through CSS Div, but now the idea has changed. Through JavaScript, you can simply center the Div on the page and make corresponding changes as the size of the web page changes. And as long as you understand the principle of centering, it can be achieved easily.
Let’s take a look at the principle of centering first!
Look at a picture first.

What do you see in the picture? You can see that the red box is centered. Why is it centered? Through observation, you can find that the blue spacing lines above and below the red frame are the same length, which ensures vertical centering, and the green spacing lines on the left and right of the red frame are also the same length, which ensures horizontal centering.
But how to make the upper and lower spacing equal? Are the left and right spacing equal?
Looking at a picture:

Assume that the height of the current webpage is 350px and the width is 400px, and the height of the red box is 150px and the width is 200px. We can find that the height of the webpage is subtracted from The height of the red frame element is 200px pixels, and these 200px pixels are the sum of the upper and lower margins. The upper and lower margins are each 100px. Similarly, the left and right are the same.
Did you feel anything?
If we know the height or width of the web page element, subtract the height or width of the element, and then divide by 2, we will get the distance between the top, bottom, left and right margins. How do we usually determine the positioning of elements? Aren't they all determined by the coordinates of top and left? So what are the coordinates of the red box now?
Look at another picture:

The coordinates of the red box are the blue upper line 100px and the green left line 100px, which are the values ​​of left and top. These two values ​​​​are not calculated. Of?
A formula can be summarized:
The top of the centered element = (height of the webpage – the height of the element) / 2;
The left of the centered element = (width of the webpage – the width of the element) /2;
The syntax converted to JavaScript is:
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
Get The coordinates of top and left are not centered.
The following is the complete code for centering:
There are several issues to pay attention to here. You need to set the position attribute of the element to absolute, that is, absolute positioning, and then add two events onload and onresize, and add the px string. , offsetHeight is to get the height of the element itself, and offsetWidth is to get the width of the element itself. This means that the div will be centered when the web page is loaded and when the size is changed. However, this approach is centered on the element and the web page. If you want one element to be centered inside another element, the principle is the same. We just need to change the width and height code of the web page to the width and height code of another element. The width and height of another element can be obtained from the height and width of the parent element of the current element. This can also be centered. If you use the jquery framework, the code will be simpler.
Please indicate the source for reprinting.