Center the content in the div horizontally and vertically

It is a very common layout to have a layer horizontal vertically centered, but it is possible to use margin:0px auto horizontally in the HTML, but the vertical center using the margin is not effective. (Page setup height:100%; is not valid), the use of absolute positioning + negative margin of the way to achieve vertical centering, but also to consider the size of the page reset, you need to use JS to correct.

Let a div level center, directly with CSS can do. As long as you set the width of the Div, and then use margin to set the margin 0 Auto,css automatically calculates the left and right margins, which makes the div centered.

1. Let the layer be centered horizontally

12345

.className{    width:270px;    height:150px;    margin:0auto;}

Use margin:0 Auto to center the layer horizontally, and be aware of the width and height required.
2, one, let the layer vertical center

12345678

.className{    width:270px;    height:150px;    position:absolute;    left:50%;    top:50%;    margin:-75px00-135px;}

Set the layer to absolute positioning, left and top 50%, when negative margins are used, and negative margins are half the size of the width. Relative positioning can also be achieved

Two, high (Line-height) method
If you want to vertically center only one line or a few words, it is the most simple to make, as long as the line height of the text and the container is the same height, such as:

p {height:30px; line-height:30px; width:100px; overflow:hidden;}
This code allows the text to be centered vertically in the paragraph.

This method is used universally, but only if the width and height of the div must be set. If the page div width and height is dynamic, say need to pop up a div layer and to center the display, the content of the div is dynamic, so the width and height is dynamic, then need to use jquery to solve the center.

jquery for horizontal and vertical centering

jquery to achieve horizontal and vertical center of the principle is to set up div css through jquery, get the DIV's left and top margin offset, margin offset algorithm is the width of the page window minus the div width, the resulting value is divided by 2 is the left offset, the right offset algorithm is the same. Note that the CSS setting of the DIV is done in the resize () method, that is, each time the window is resized, the CSS that sets the div is executed, with the following code:

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

It is also necessary to call resize () when the page is loaded.

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

The advantage of this method is that you do not need to know the specific width and height of the div, directly with jquery can be horizontal and vertical center, and compatible with each browser, this method in a lot of pop-up layer effect application.

Center the content in the div horizontally and vertically