Using CSS to achieve the vertical center of objects There are many different ways, it is difficult to choose the right method. Let me explain the good way I see it and how to create a good center site.
It's not easy to use CSS to center vertically. Some methods are not valid in some browsers. Let's look at the 5 different methods that make objects vertical, and their pros and cons. (Take a look at the test page for a short explanation.) )
Method One
This method sets the display of some div as a table, so we can use the Vertical-align property properties of the table.
<div id= "Wrappers" >
<div id= "Cell" >
<div class= "Content" >
Content goes here</div>
</div>
</div>
#wrapper {display:table;}
#cell {Display:table-cell; vertical-align:middle;}
Advantages:
Content can dynamically change the height (not defined in CSS). Content is not truncated when there is not enough space in the wrappers
Shortcomings:
Invalid in Internet Explorer (or even IE8 beta), many nested tags (actually not that bad, another topic)
Method Two:
This method uses the absolutely positioned DIV to set its top to the 50%,top margin set to the negative content height. This means that the object must specify a fixed height in the CSS.
Because there is a fixed height, you may want to specify Overflow:auto for the content so that if there is too much content, the scroll bar will appear, lest the content overflow.
<div class= "Content" >
Content goes here</div>
#content {
Position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* Negative half of the height * *
}
Advantages:
Applies to all browsers
No nested tags required
Shortcomings:
When there is not enough space, the content disappears (like a div within the body, when the user shrinks the browser window, the scroll bar does not appear)
Method Three
This method inserts a div outside the content element. Set this div height:50%; Margin-bottom:-contentheight;
The content clears the float and is displayed in the middle.
<div id= "Floater" >
<div id= "Content" >
Content here</div>
</div>
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
Advantages:
Applies to all browsers
Content is not truncated when there is not enough space (for example: shrinking the window), scroll bars appear
Shortcomings:
The only thing I can think of is the need for extra empty elements (it's not that bad, it's another topic)
Method Four
This method uses a Position:absolute, with a fixed width and height div. This div is set to top:0; bottom:0; But because it has a fixed height, actually can not and up and down both spacing is 0, so margin:auto; Makes it center. Using Margin:auto; it is easy to center the block-level elements vertically.
<div id= "Content" >
Content here</div>
#content {
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
height:240px;
width:70%;
}
Advantages: Simple
Shortcomings:
Invalid IE (IE8 beta)
When there is not enough space, the content is truncated, but no scroll bars appear
Method Five
This method can only place single-line text in. Simply set the line-height to the height value of that object to make the text centered.
<div id= "Content" >
Content here</div>
#content {height:100px; line-height:100px;}
Advantages:
Applies to all browsers
Not truncated when there is not enough space
Shortcomings:
Valid only for text (block-level elements are not valid)
It's a bad word when you have more rows.