The div vertical and horizontal center instance Code implemented by jQuery, jquerydiv

The div vertical and horizontal center instance Code implemented by jQuery, jquerydiv

Code of the div vertical and horizontal center instance implemented by jQuery:
There is a div element in the window. The following describes how to use jQuery to set it to horizontal and vertical center alignment, hoping to provide some help to friends who need it.
The code example is as follows:

<! DOCTYPE html> 
The above code implements the vertical center effect of the div. The following describes the implementation process:
I. Implementation principle:
1. How to implement horizontal center: You can align the div horizontally in the css file by adding the following code:
margin:0 auto;
2. How to Implement vertical center effect: You can use jQuery to set the top property value of div to the following values to vertically center in the window:
top:($(window).height()-$('.className').outerHeight())/2
The above code can implement vertical center effect of div in the window, but there is still a problem with this writing. If there is a scroll bar in the vertical direction, it may become invalid, because the size to be rolled must be included, it is why $ (document) needs to be added to the Code ). scrollTop ().
Ii. Related reading:
1. For details about the css () function, see the css () method section of jQuery.
2. For details about the width () function, see the width () method section of jQuery.
3. For details about the height () function, see the height () method section of jQuery.
4. For more information about the outerHeight () function, see the outerHeight () method section of jQuery.
5. For details about the scrollTop () function, refer to jQuery's scrollTop () method.
6. For details about the resize event, see the resize event section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 9271.
For more information, see: http://www.softwhy.com/jquery/