Recently, I am working on a red wine-related website. Because of the high design requirements, I made a website with a strong image sense. However, I found it strange in large resolutions, especially, to center the horizontal and vertical pages of a webpage, You can center a div horizontally and vertically. Although there are several ways to achieve this, my favorite method is introduced today, implemented through css and jQuery. Veryhuo.com
1. Implement horizontal center through css: helping customers
Copy to ClipboardReference: [www.bkjia.com]. 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 to ClipboardReference: [www.bkjia.com]. className {liehuo.net
Width: 300px;
Height: 200px;
Position: absolute;
Left: 50%;
Top: 50%;
Margin:-100px 0 0-150px;
}
3. Implemented through jQuery
Liehuo.net
As mentioned above, the css method only applies to div with fixed size, so jQuery plays a role: liehuo.net
Copy to ClipboardReference: [www.bkjia.com] $ (window). resize (function (){
Certificate ('.classname'}.css ({
Position: 'absolute ',
Left: ($ (window). width ()-$ ('. classname'). outerWidth ()/2,
Top: ($ (window). height ()-$ ('. classname'). outerHeight ()/2
});
});
// Initialize the Function
$ (Window). resize ();