How to align an absolutely positioned div horizontally and vertically, and align div horizontally

How to align an absolutely positioned div horizontally and vertically, and align div horizontally

How to align an absolutely positioned div vertically in the center:
Suggestion: writing code as much as possible can effectively improve learning efficiency and depth.
In some cases, you may need to align an absolutely positioned div vertically in the center of its parent object. The frequency may not be too high, but it may also be used occasionally, the following describes how to implement this function. In general, you can add a margin: 0px auto to the element so that the element is horizontally centered on its parent element, and then set it to vertical center alignment. However, adding a margin: 0px auto to an absolutely positioned object does not take effect. Therefore, we still need to implement it in the old way.
The sample code is as follows:

<! DOCTYPE html> 
The code above can align the child div horizontally and vertically in the parent div. The following describes several key points:
1. The parent element uses relative positioning, so that the element can be used as a reference object for displacement. For more information, see absolute position of CSS.
2. top attribute value calculation method: parent element height/2-child element height/2, left attribute value calculation method: parent element width value/2-child element width value/2.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 6952.