How to center body content in css

How to center the body content in css: 1. Use margin to set the margin to "0 auto" to center all elements in the HTML page horizontally; 2. Set the distance between the div and the left and upper borders of the page window. Set to "50%"; 3. Use jQuery to achieve horizontal and vertical centering.

The operating environment of this tutorial: Windows 7 system, HTML5&&CSS3 version, DELL G3 computer.

Recommended: css video tutorial

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

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

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

CSS to achieve horizontal and vertical centering

Make the DIV horizontal and vertical centering, you must know the width and height of the DIV, then set the position to absolute position, and set the distance from the left border and top border of the page window to 50%. This 50% refers to 50% of the width and height of the page window. Finally, move the DIV left and up respectively. The size of the left and up moves 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 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 pop up and be 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 to achieve horizontal and vertical centering is to set the CSS of DIV through jQuery to obtain the left and top margin offset of DIV The algorithm for shift and margin offset 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(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

In addition, when the page is loaded, it needs to be called 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 directly use jQuery to achieve horizontal and vertical centering, and it is compatible with various browsers. This method is used in many pop-up layer effects. .

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

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

to the body

The above is the detailed content of How to center body content in css. For more information, please follow other related articles on the PHP Chinese website!