Shulou(Shulou.com)06/03 Report--

How to use absolute positioning and negative margins to make the DIV layer horizontally and vertically center the page, I believe many inexperienced people are at a loss about this, so this paper summarizes the causes and solutions of the problem, through this article I hope you can solve this problem.

Centering a layer horizontally and vertically is a very common layout, but horizontal centering can be achieved with margin:0px auto; in html, but vertical centering cannot be achieved with outer margins. (page setup height:100%; is invalid). Here, absolute positioning + negative outer margins are used to achieve vertical centering, but at the same time, to consider the page reset size, you need to use js to correct it.

1. Let the floor be centered horizontally

The code is as follows:

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

Using margin:0 auto; to center the layer horizontally, it is necessary to pay attention to the width and height.

2. Let the floor be centered vertically

The code is as follows:

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

Set the layer to absolute positioning, left and top to 50%, this time use a negative margin, the size of the negative margin is half the width and height.

3. The layer remains centered when the form is reset

The code is as follows:

$(document) .ready (function () {$(window) .resize (function () {$('className'). Css ({position:'absolute', left: ($(window). Width ()-$('className'). OuterWidth ()) / 2, top: ($(window). Height ()-$('.className). OuterHeight ()) / 2}); $(window). Resize ();})

The jquery method used here.

Resize () event: triggered when the form is resized.

OuterWidth (): gets the outer width of the first matching element (including padding and borders by default).

After reading the above, have you learned how to center the page horizontally and vertically using absolute positioning and negative margins? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.