JQuery-based horizontal and vertical center div window _ jquery-js tutorial

When building a webpage layout, we often face a problem, that is, to align a div horizontally and vertically. Although there are several ways to achieve it, my favorite method is introduced today, implemented through css and jQuery. 1. Implement horizontal center through css:

The Code is as follows:

. ClassName {
Margin: 0 auto;
Width: 200px;
Height: 200px;
}

2. Implement horizontal and vertical center through css
Creating a horizontal and vertical center p through css is a troublesome task. You must know the size of another p in advance:

The Code is as follows:

. ClassName {
Width: 300px;
Height: 200px;
Position: absolute;
Left: 50%;
Top: 50%;
Margin:-100px 0 0-150px;
}

3. Using jQuery to implement horizontal and vertical center as mentioned above, css is only applicable to fixed-size p, so jQuery plays a role:

The Code is as follows:

$ (Window). resize (function (){
Certificate ('.classname'}.css ({
Position: 'absolute ',
Left: ($ (window). width ()-$ ('. classname'). outerWidth ()/2,
Top: ($ (window). height ()-$ ('. classname'). outerHeight ()/2 + $ (document). scrollTop ()
});
});
// Initialize the Function
$ (Window). resize ();

The advantage of this method is that you do not need to know the size of p, but the disadvantage is that it can only be implemented through JavaScript.