Use negative margin values in CSS to adjust center position

This is perhaps the most commonly used centering method. If you know the size of each element, set a negative margin value equal to half the width of the height (if you do not use the Box-sizing:border-box style, you also need to add a padding value), and then with top:50%; left:50%, the style causes the block element to be centered.

It is important to note that this is the only way to work under ie6-7 as expected.

CSS Code copy content to clipboard

. is-negative {               width:300px;               height:200px;               padding:20px;               Position:absolute;               top:50%; left:50%;               Margin-left: -170px; /* (width + padding)/2 */              margin-top: -120px;/* (height + padding)/2 */      }

Benefits:

Browser compatibility is very good, even support ie6-7
The required number of encodings is very low

Also note:

This is a non-responsive method, cannot use a percentage size, and cannot set the maximum minimum value for min-/max-.
Content may go beyond the container
You need to reserve space for padding, or you need to use the Box-sizing:border-box style.