How to align divbody horizontally to the vertical and horizontal center of the DIV

How to align divbody horizontally to the vertical and horizontal center of the DIV

When designing the page, we often need to center the DIV and align it with the horizontal and vertical directions of the page window, for example, to center the login window. Our traditional solution is to use pure CSS to center the DIV. In this article, I will show you how to use CSS and jQuery to center the DIV horizontally and vertically.

CSS: Align DIV horizontally

Note: The DIV mentioned in this article includes all elements on the HTML page.

Align a DIV horizontally and use CSS directly. As long as the DIV width is set and the margin 0 auto is set using margin, CSS automatically calculates the left and right margins to center the DIV.

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

But if you want to center the vertical direction of the DIV, I am afraid the CSS needs to be modified.

CSS achieves horizontal and vertical center

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

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

This method is common, but the premise is that the width and height of the DIV must be set. If the width and height of the page DIV are dynamic, for example, a DIV layer needs to be popped up and displayed in the center, the content of the DIV is dynamic, so the width and height are also dynamic, in this case, jQuery can be used to solve the center problem.

Align horizontally and vertically using jQuery

The principle of implementing horizontal and vertical center in jQuery is to use jQuery to set the css of the div to get the margin offset on the left and top of the DIV, the margin offset algorithm is to subtract the DIV width from the page window width. The obtained value is divided by 2, that is, the left offset. The right offset algorithm is the same. Note that the CSS setting of the DIV must be completed in the resize () method, that is, the CSS setting of the DIV should be executed every time the window is changed for an hour. The Code is as follows:

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

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

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

The advantage of this method is that you do not need to know the specific width and height of the DIV. You can use jQuery to center horizontally and vertically, and be compatible with browsers, this method is applied in many pop-up layer effects.

Ps: If the div width is greater than the page width, you need to add a css to the body

<Style type = "TEXT/CSS">
Body {width: 100%; overflow: hidden}
</Style>

 

Note: This article comes from helloweba.com, the original address is http://www.helloweba.com/view-blog-93.html