Use negative margin values ​​​​in CSS to adjust the 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 and height (if you do not use the box-sizing: border-box style, you also need to add a padding value), and then match top: 50%; left: 50% ; style will center the block element.

It should be noted that this is the only way to work under IE6-7 as expected.

##CSS CodeCopy 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 supporting IE6-7

Requires very little coding

Also note:

This is a non-responsive method. You cannot use percentage sizes, nor can you set min-/max-maximum and minimum values.

The content may exceed the container
You need to reserve space for padding, or you need to use the box-sizing: border-box style.

For more related articles about using negative margin values ​​in CSS to adjust the center position, please pay attention to the PHP Chinese website!