The use of CSS perfect way to achieve vertical center

Apr 11 posted in AJAX (RSS), comments.

The use of XHTML + CSS to achieve the vertical elements in the middle has been the front-end development of a more complex and difficult issue, as web designer or front-end development engineers, the vertical center is also the question of the skills one must master a number of Internet companies face questions will arise in such topics. Storm Binbin today will share a perfect CSS implementation through the vertical center of the method are from aka Yuh ů invention , this method is the most perfect storm Binbin think the most concise way to achieve CSS vertical center. Take a look at the following Storm Binbin once summed up the notes, everyone has different opinions please Pat brick :

First take a look at examples of the effect of Demo

CSS vertical center of the conditions:

1. Have a defined height of the container (such as <div>)
2. There is an unknown height of internal object (perhaps Backgrounds are dynamically generated text, on the other <div> Medium)
3. I want the object of the internal containers at a vertical center.
4. Do not use HTML tables (table elements), nor the use of Javascript.

CSS vertical center of the approach:

The biggest problem: IE Browser Bug.

Most browsers can understand CSS in the display: table form like the statement, but earlier versions of IE7 and below IE can not understand this statement.

Solution: Let the majority can understand display: table declaration browser uses vertical-align property to meet the vertical center, so that the following version of IE7 and use their high level of understanding to resolve the central problem Bug.

IE Bug:

Version of IE7 and below a high degree of understanding Bug: If a container has b object, a container and does not create a high value, if b has the actual contents of the object (such as language), it will be a high degree of understanding with the b equivalent. For b taken if relative positioning, b will be at a relative to the original location (the main use of the percentage of height).

eg: a defined height, b the height of 100px, to b relative positioning, as well as top: -50%

In such a case: standard browser because of the unknown a height, so b Acinetobacter. The version of IE7 and below will allow a relatively high degree of b (in fact, b of equal height) moved up 50%, which is 50px.

How to allow only the following versions of IE7 and understanding of their statement?

1.Pixy had invented underscore hack , That is, at each CSS Add a property before the underscore "_", this hack is specifically for versions of IE6 and below, that is to say IE7 can not understand. Such as: _position: absolute; so this hack on PASS!
2. At the former property add "#" is a statement can only allow the following version of IE7 and understanding of, and any other browsers can not understand this "#", so "#" after the statement will be ignored in other browsers. OK ~ ~ on this!

Compatibility:

Until now compatible IE8.x all IE browser, Gecko core browser (Mozilla, Firefox, Netscape 7), Opera 7, Webkit core browser (Safari and Google Chrome).

Code:

CSS part:

# outer (
display: table;
height: 400px;
# position: relative;
overflow: hidden;
)
# middle (
display: table-cell;
vertical-align: middle;
# position: absolute;
# top: 50%;
)
# inner (
# position: relative;
# top: -50%;
)

XHTML part:

<div"outer">
<div"middle">
<div"inner">
<! - Here is to the vertical center of the content ->
</ div>
</ div>
</ div>

Demo preview of the effect of (Demo at the source code for a number of additional modified CSS Statement, everyone can be ignored)

After testing, the method also applies to the vertical middle picture, it is recommended the use of U.S. at the time the definition of the width of a good outer layer.

This article links: http://blog.bingo929.com/css-vertical-center.html