How to center a DIV horizontally and vertically relative to the body_html/css_WEB-ITnose

When we design the page, we often need to center the DIV, and display it horizontally and vertically relative to the page window, such as centering the login window. Our traditional solution is to use pure CSS to center the DIV. In this article, I will tell you how to center a DIV horizontally and vertically using CSS and jQuery.

CSS centers the DIV horizontally

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

To center a DIV horizontally, you can do it directly with CSS. As long as you set the width of the DIV, and then use margin to set the margin to 0 auto, CSS will automatically calculate the left and right margins to center the DIV.

<strong>.mydiv</strong>{        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 to achieve horizontal and vertical centering

To make a DIV horizontally and vertically centered, you must know the width and height of the DIV, and then set the position to absolute position, distance from the left and top borders of the page window The distance is set to 50%. This 50% refers to 50% of the width and height of the page window. Finally, the DIV is moved left and up respectively. The size of the left and up moves is half of the width and height of the DIV.

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

This method is commonly used, but the premise is that the width and height of the DIV must be set. If the DIV width and height of the page 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 centering problem.

jQuery achieves horizontal and vertical centering

The principle of jQuery achieving horizontal and vertical centering is to set the CSS of DIV through jQuery to obtain the left and top margin offsets of the DIV. The algorithm for shifting is to subtract the width of the DIV from the width of the page window, and the resulting value is divided by 2, which is the left offset. The algorithm for the right offset is the same. Note that the CSS setting of the DIV must be completed in the resize() method, that is, every time the window size is changed, the CSS setting of the DIV must be executed. The code is as follows:

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

In addition, when the page is loaded, Need to call resize().

$(<strong>function</strong>()<strong>{</strong>      $(window).resize();  <strong>}</strong>);  

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

ps: If the width of the div is larger than the width of the page, then you need to add a css to the body

993671b22fd0d737c168beae4bb2079d
body{width: 100%; overflow:hidden}
531ac245ce3e4fe3d50054a55f265927

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