How to use negative margin values ​​​​to adjust the center position in CSS

This article mainly introduces the method of using negative margin values ​​to adjust the center position in CSS. The article also mentions some noteworthy aspects of this common method. Friends in need can refer to this

Perhaps the most common 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.

.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 */
}

Advantages:

Very good browser compatibility, even supports IE6-7
Requires very little coding

At the same time, note:

This is a non-responsive method. You cannot use percentage sizes, nor can you set the maximum and minimum values ​​of min-/max-.
The content may exceed the container
You need to reserve space for padding, or you need to use the box-sizing: border-box style.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use the position:fixed attribute to center a DIV

How to implement CSS pop-up window centering

For analysis of CSS float and position

The above is the detailed content of How to use negative margin values ​​​​to adjust the center position in CSS. For more information, please follow other related articles on the PHP Chinese website!