Jquery implements vertical div center and jquerydiv Center

Jquery implements vertical div center and jquerydiv Center

My paper delivery

How to center DIV horizontally and vertically
Note: The DIV mentioned in this article includes all elements on the HTML page. Align a DIV horizontally and use CSS directly. As long as the DIV width is set and the margin 0 auto is set using margin, CSS automatically calculates the left and right margins to center the DIV .. Mydiv {margin: 0 auto; width: 300px; height: 200px;} but if you want to center the vertical direction of the DIV, I am afraid the CSS needs to be modified. To center the DIV horizontally and vertically in CSS, you must know the width and height of the DIV and set the position to absolute, the distance between the left border and the top border of the page window is set to 50%. This 50% refers to 50% of the width and height of the page window, And the DIV is moved left and up, respectively, the size of the Left and top moves is half the width and height of the DIV .. Mydiv {width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; margin:-100px00-150px} This method is widely used, however, you must set the width and height of the DIV. If the width and height of the page DIV are dynamic, for example, a DIV layer needs to be popped up and displayed in the center, the content of the DIV is dynamic, so the width and height are also dynamic, in this case, jQuery can be used to solve the center problem. JQuery implements horizontal and vertical center jQuery's principle of implementing horizontal and vertical center is to set the css of the div through jQuery to get the left and top margin offset of the DIV, the margin offset algorithm is to subtract the DIV width from the page window width. The obtained value is divided by 2, that is, the left offset. The right offset algorithm is the same. Note that the CSS setting of the DIV should be completed in the resize () method, that is, the css of the div should be executed every time the window is changed for an hour. The Code is as follows: $ (window ). resize (function () {$ (". mydiv "pai.css ({position:" absolute ", left :( $ (window ). width ()-$ (". mydiv "). outerWidth ()/2, top :( $ (window ). height ()-$ (". mydiv "). outerHeight ()/2}); in addition, you need to call resize () when loading the page (). $ (Function () {$ (window ). resize () ;}); the advantage of this method is that you do not need to know the specific width and height of the DIV. You can use jQuery to center horizontally and vertically, and be compatible with browsers, this method is applied in many pop-up layer effects.

Q: How can DIV align vertically with DIV center?
Despite the vertical-align feature of CSS, it cannot effectively solve the vertical center problem of unknown height (in the case of text or images with unknown heights in a DIV label ). Standard browsers such as Mozilla, Opera, and Safari ., you can set the display mode of parent-level elements to TABLE (display: table;) and the internal sub-elements to table-cell (display: table-cell ), vertical-align features are used to center vertices vertically, but non-standard browsers do not.
Non-standard browsers can only set the header to 50% in the child element, and then set another element to offset from the top to 50%.
CSS:
Body {padding: 0; margin: 0;} body, html {height: 100% ;}
# Outer {height: 100%; overflow: hidden; position: relative; width: 100%; background: ivory ;}
# Outer [id] {display: table; position: static ;}
# Middle {position: absolute; top: 50%;}/* for explorer only */
# Middle [id] {display: table-cell; vertical-align: middle; position: static ;}
# Inner {position: relative; top:-50%; width: 400px; margin: 0 auto;}/* for explorer only */
Div. greenBorder {border: 1px solid green; background-color: ivory ;}

<Div id = "outer">
<Div id = "middle">
<Div id = "inner" class = "greenBorder">
</Div>
</Div>
</Div>

The advantage of the above CSS code is that there is no hacks and the CSS2 selector # value [id] that is not supported by IE is used.

CSS2 selector # value [id] is equivalent to selector # value, but Internet Explorer does not support this type of selector. Similarly,. value [class] is equivalent to. value, which can only be understood by standard browsers.

Test: Firefox1.5, Opera9.0, IE6.0, and IE5.0 pass.
Reference: zhidao.baidu.com/question/17109128.html? Si = 5