Center The Div using JavaScript and change as the webpage size changes

When Java is used as the background, all login pages are implemented, but their pages are too ugly to be centered or colored, however, you have to center the logon box in either case! The previous idea was to center the Div through CSS + div, but the current idea has changed. JavaScript allows the Div to be centered on the page and changed accordingly as the page size changes. And it is easy to understand the principle of center.
Let's take a look at the center principle first!
First look at a picture.
 
What do you see? We can see that the red box is centered. Why is it centered? Through observation, we can find that the blue distance between the upper and lower sides of the red box is the same length, which ensures the vertical center and the green distance between the left and right sides of the red box is also the same length, this ensures horizontal center.
But how can we make the spacing between upper and lower equal? What about equal spacing between left and right?
See a picture:
 
Assume that the current webpage has a height of PX and a width of PX, while the height of the red box is PX and the width is PX. We can find that the webpage's height is Px after the height of the red box element, the 200px pixel is the sum of the top and bottom margins, and the top and bottom margins are respectively PX. Likewise, the left and right are the same.
Do you feel anything?
If we know the height or width of the webpage element, minus the height or width of the element, and divide it by 2, we get the distance between the top, bottom, and left margins. How do we determine the positioning of elements? Aren't they all determined by the top and left coordinates? So what are the coordinates of the red box now?
Let's look at another figure:
 
The coordinates of the red box are 100px on the Blue Line, and 100px on the left of the green line, that is, the values of left and top. Aren't these two values calculated?
You can sum up a formula:
Top = Of The centered element (webpage height-height of the element)/2;
Left = (webpage width-element width)/2 of the centered element;
The syntax for converting to JavaScript is:
Top = (document. body. clientHeight-element. offsetHeight)/2;
Left = (document. body. clientWidth-element. offsetWidth)/2
The coordinates obtained from top and left are not centered.
The complete code for center is as follows:
Pay attention to several issues here. Set the position attribute of the element to absolute, that is, absolute positioning. Then add two events onload and onresize, and add the px string, offsetHeight is the height of the element itself, and offsetWidth is the width of the element itself. This means that when the webpage is loaded and the div is centered when it is changed. However, this approach is the center of the element and the page. If you want to center an element inside another element, the principle is the same. We only need to change the code of the width and height of the webpage to the code of the width and height of another element. The width and height of another element can be obtained by obtaining the height and width of the parent element of the current element. This can also be centered. If jquery is used, the code is simpler.
Reprinted, please specify the source.