1. Implement horizontal center through css:
Copy codeThe 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 div using css is a troublesome task. You must know the size of another div in advance:
Copy codeThe 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 div with fixed size, so jQuery plays a role:
Copy codeThe 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 the div, but the disadvantage is that it can only be implemented through JavaScript.