Unknown wide-height div vertical center 3 methods, div horizontal center 3 methods

Unknown wide-height div vertical center 3 methods, div horizontal center 3 methods

<! DOCTYPE html> 



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.

How to horizontally center and vertically center divs with varying width and height
Comment: Since page refactoring, we often encounter horizontal or vertical centered divs with unfixed width! Summary! The horizontal center of div with unfixed width and height is shown as follows: horizontal center code: html part <div class = "container">
<Div class = "center"> <a href = "#"> 1 </a> <a href = "#"> 2 </a> <a href = "# "> 3 </a>
<Div style = "clear: both"> </div> css section. container {width: 500px; height: 80px; background: # C2300B; margin-left: 50px; padding-top: 10px; text-align: center ;}
. Center {display: inline-block; border: 2px solid # fff ;}
. Center {_ display: inline;}/* For ie6 hack */
. Center a {float: left; border: 1px solid # fff; padding: 5px 10px; margin: 10px; color: # fff; text-decoration: none ;}
Key code points: add the css attribute text-align to the parent container: center;
Add the css attribute display: inline-block to the sub-container center;
. Center {_ display: inline;} shows the vertical center of the div with an unfixed hack width and height for ie6: vertical center code: <div id = "vc"> <div id = "vci"> <div id = "content">
We are vertically centered, and we are horizontally centered
</Div> css part # vc {display: table; background-color: # C2300B; width: 500px; height: 200px; overflow: hidden; margin-left: 50px ;}
# Vci {vertical-align: middle; display: table-cell; text-align: center; _ position: absolute; _ top: 50%; _ left: 50% ;}
# Content {color: # fff; border: 1px solid # fff; display: inline-block; _ position: relative; _ top:-50%; _ left:-50% ;}
Key code points: display: table; overflow: hidden; css attribute of the parent container vc;
The css attribute vertical-align of the sub-container vci: middle; display: table-cell;
For the hack of ie6, The _ position: absolute; _ top: 50%; of the vci container and the _ position ...... remaining full text of the content container>