label: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Center up and down, center left and right, center in layers, center elements, login box
Even if we understand the properties of each HTML element in the CSS language, it is still difficult to write pure CSS code when we need to set the vertical and horizontal centering of an absolutely positioned element.
If you searched here for this reason, then you can directly use the code of method two.
All browsers mentioned in this article do not include extremely old browsers that do not implement the marign:auto standard, nor browsers with negligible market share.
Direct method, by setting the left and top properties of the element
If you know the size of the parent element, you can set the left and top properties of the absolutely positioned HTML element to be centered; if you don't know the size of the parent element, we can get the width and height, css('width') and css('height') of the jQuery library. The size of the element, then set left and top.
Formula: left equals 50% minus half of element width, and top equals 50% minus half of element height.
It can be calculated by the calc of the CSS expression, it can also be set by setting the margin to the corresponding negative value, and it can also be set by shift.
This method is straightforward and effective, but not simple and elegant enough.
/* CSS */
Automatic method: set margin to auto
This method is simple and works on modern browsers. The reliability of this method is determined by the consistency of the browser's typesetting engine implementation.
In the last five years, we usually use this method to set the centering of an HTML element.