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, hope to be helpful to you.

When we design the page, we often have to center the DIV display, and relative to the horizontal and vertical direction of the page window display, such as let the login window center display. Our traditional solution is to use pure CSS to center DIV. I'm going to show you how to center DIV horizontally and vertically using CSS and jQuery.

CSS centers DIV horizontally.

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

To center a DIV level, you can do it directly with CSS. As long as you set the width of the DIV, then use margin to set the margin 0 auto,CSS to automatically calculate 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 the CSS needs to be modified.

CSS achieves horizontal and vertical centralization

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

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

JQuery achieves horizontal and vertical centralization

The principle of horizontal and vertical centering of jQuery is to set the CSS of DIV through jQuery to obtain the left and upper margin offset of DIV. The algorithm of margin offset is to subtract the width of the DIV from the width of the page window. The value obtained is divided by 2, that is, the left offset, and the right offset algorithm is the same. Note that the CSS setting of DIV should be completed in the resize () method, that is, each time the window is resized, the CSS for setting DIV is executed 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 do not need to know the specific width and height of DIV, you can directly use jQuery to achieve horizontal and vertical center, and compatible with various browsers, this method is used in many pop-up layer effects.

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

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.