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

This article mainly introduces the use of negative margin value in CSS to adjust the center position of the method, the article also mentions the common method of some noteworthy places, the need for friends can refer to the following

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.

. 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.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!