Shulou(Shulou.com)06/02 Report--

This article introduces you how to make DIV horizontal and vertical center, the content is very detailed, interested friends can refer to, I hope to help you.

When we design pages, we often want to center the DIV, and it is centered horizontally and vertically relative to the page window, such as centering the login window. Our traditional solution is to center the DIV with pure CSS. I'll show you how to center the DIV horizontally and vertically using CSS and jQuery.

CSS centers DIV horizontally

Note that the DIV referred to in this article includes all elements of HTML pages.

Center a DIV horizontally and you can do it directly with CSS. As long as the width of the DIV is set, and then the margin is set to 0 auto using margin, CSS automatically calculates the left and right margins so that the DIV is centered.

.myp{ margin:0 auto; width:300px; height:200px; }

But if you want to center the DIV vertically, I'm afraid CSS needs to be modified.

CSS for horizontal and vertical centering

To center the DIV horizontally and vertically, you must know the width and height of the DIV, and then set the position to absolute position, the distance from the left border and the upper border of the page window is set to 50%, this 50% refers to the width and height of the page window 50%, and finally move the DIV left and up respectively, the size of the left and up is half of the width and height of the DIV.

.myp{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px }

This method is commonly used, but only if the width and height of the DIV must be set. If the page DIV width and height are dynamic, for example, you need to pop up a DIV layer and display it centrally. The content of the DIV is dynamic, so the width and height are also dynamic. At this time, you need to use jQuery to solve the centering.

jQuery horizontal and vertical centering

jQuery horizontal and vertical centering principle is to set the CSS of DIV through jQuery, get the left and upper margin offset of DIV, margin offset algorithm is to use the width of the page window minus the width of the DIV, the value obtained divided by 2 is the left offset, the right offset algorithm is the same. Note that the CSS setting of DIV should be done in the resize() method, that is, every time the window size is changed, the CSS setting of DIV should be executed. The code is as follows:

$(window).resize(function(){ $(".myp").css({ position: "absolute", left: ($(window).width() - $(".myp").outerWidth())/2, top: ($(window).height() - $(".myp").outerHeight())/2 }); });

In addition, when the page loads, you need to call resize().

$(function(){ $(window).resize(); });

The advantage of this method is that you don't need to know the specific width and height of the DIV, you can use jQuery directly to achieve horizontal and vertical centering, and it is compatible with various browsers. This method is applied in many pop-up layer effects.

About how to make DIV horizontal and vertical center to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.