At the time of when it comes to this question, maybe someone will ask CSS not have vertical - the align attribute to set the vertical centered? Even some browser does not support I can do a little CSSHack technology can ah! So here I have long-winded, CSS is indeed has the vertical - the align attribute, but it is only right (X) HTML element in the element, that she was born with valign features such as form elements <Td> , <Th> , <Caption> , etc., and the like <Div> , <Span> Such element is not valign properties, so use the vertical - align doesn't work on them.
a, vertical center line
code is as follows:


div {
height: 25 px;
the line - height: 25 px;
overflow: hidden;
}

this code is very short, the use of overflow: hidden Settings is to prevent the content beyond the container or automatic line feed, so to reach the effect of vertical center. More teach CSS
.

  code is as follows:  


<! DOCTYPEhtmlPUBLIC "-////W3C DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTMLXMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> Single line to achieve vertical center </title>
<Metahttp - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Styletype="text/CSS" >
body {the font - size: 12 px; The font-family: tahoma; }
div {
height: 25 px;
the line - height: 25 px;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
}
</style>
</head>
<Body>
<Div> Now we are going to make the paragraph the vertical center!!! </div>
</body>
</html>

2, of vertical center line height of unknown words
code is as follows:


div {
the padding: 25 px;
}

the advantage of this approach is that it can run on any web browser, and the code is very simple, but this method is the premise of the height of the container must be scalable.

  code is as follows:  


<! DOCTYPEhtmlPUBLIC "-////W3C DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTMLXMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> Multiline text to achieve vertical center </title>
<Metahttp - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Styletype="text/CSS" >
body {the font - size: 12 px; The font-family: tahoma; }
div {
the padding: 25 px;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
}
</style>
</head>
<Body>
<Div> <Pre> Now we are going to make the paragraph the vertical center!!!
div {
the padding: 25 px;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
}
</pre> </div>
</body>
</html>

3, multiline text fixed height of the center of the
code is as follows:


div # wrap {
height: 400 px;
display: table;
}
div # content {
vertical - align: middle;
display: table - cell;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
}

  code is as follows:  


<! DOCTYPEhtmlPUBLIC "-////W3C DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTMLXMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> Multiline text to achieve vertical center </title>
<Metahttp - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Styletype="text/CSS" >
body {the font - size: 12 px; The font-family: tahoma; }
div # wrap {
height: 400 px;
display: table;
}
div # content {
vertical - align: middle;
display: table - cell;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
}
</style>
</head>
<Body>
<Divid="wrap" >
<Divid="content" ><Pre> Now we are going to make the paragraph the vertical center!!! Webjx.Com
div # wrap {
height: 400 px;
display: table;
}
div # content {
vertical - align: middle;
display: table - cell;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
}
</pre> </div>
</div>
</body>
</html>

this method should be very ideal, but unfortunately the InternetExplorer6 cannot understand correctly display: table and display: table - cell, so this method in InternetExplorer6 and below version is invalid. Well, this let a person very depressed! But we have other way to four, in InternetExplorer
solution

code is as follows:


<Divid="wrap" >
<Divid="subwrap" >
<Divid="content" >
</div>
</div>
</div>

if we absolute positioning for subwrap, so the content will also inherited this this property, even though it won't be displayed on the page immediately, but if the relative positioning of the content again, than you use 100% of the points will no longer be the content of the original height. For example, we set the subwrap position of 40%, if we want to make the content of the edge and wrap overlap must be installed on top: - 80%; So, if we set subwrap top: 50%, we must use to make the content 100% back to original position, but if we set the content is 50%? It is just the vertical center. So we can use this method to implement the vertical center of InternetExplorer6:

  code is as follows:  


div # wrap {
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
height: 400 px;
position: relative;
}
div # subwrap {
position: absolute;
border: 1 pxsolid # 000;
top: 50%;
}
div # content {
border: 1 pxsolid # 000;
position: relative;
top: - 50%;
}

of course, this code can only be InternetExlporer6 calculation problems such as the browser will have effect. (but I don't understand, I looked at a lot of articles, don't know because the source is the same or what the reason, it seems that many people are reluctant to explain InternetExlporer6 in the principle of this Bug, I just know a little bit of fur, and then studies)

  code is as follows:  


<! DOCTYPEhtmlPUBLIC "-////W3C DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTMLXMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> Multiline text to achieve vertical center </title>
<Metahttp - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Styletype="text/CSS" >
body {the font - size: 12 px; The font-family: tahoma; }
div # wrap {
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
height: 400 px;
position: relative;
}
div # subwrap {
position: absolute;
top: 50%;
}
div # content {
position: relative;
top: - 50%;
}
</style>
</head>
<Body>
<Divid="wrap" >
<Divid="subwrap" >
<Divid="content" ><Pre> Now we are going to make the paragraph the vertical center!!!
div # wrap {
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
height: 500 px;
position: relative;
}
div # subwrap {
position: absolute;
border: 1 pxsolid # 000;
top: 50%;
}
div # content {
border: 1 pxsolid # 000;
position: relative;
top: - 50%;
} </pre>
</div>
</div>
</div>
</body>
</html>

5, perfect solution
code is as follows:


div # wrap {
display: table;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
height: 400 px;
_position: relative;
overflow: hidden;
}
div # subwrap {
vertical - align: middle;
display: table - cell;
_position: absolute;
_top: 50%;
}
div # content {
_position: relative;
_top: - 50%;
}

at this point, a perfect center plan is generated.

  code is as follows:  


<! DOCTYPEhtmlPUBLIC "-////W3C DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTMLXMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> Multiline text to achieve vertical center </title>
<Metahttp - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Styletype="text/CSS" >
body {the font - size: 12 px; The font-family: tahoma; }
div # wrap {
display: table;
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
height: 400 px;
_position: relative;
overflow: hidden;
}
div # subwrap {
vertical - align: middle;
display: table - cell;
_position: absolute;
_top: 50%;
}
div # content {
_position: relative;
_top: - 50%;
}
</style>
</head>
<Body>
<Divid="wrap" >
<Divid="subwrap" >
<Divid="content" ><Pre> Now we are going to make the paragraph the vertical center!!!
div # wrap {
border: 1 # pxsolid FF0099;
background - color: # FFCCFF;
width: 760 px;
height: 500 px;
position: relative;
}
div # subwrap {
position: absolute;
border: 1 pxsolid # 000;
top: 50%;
}
div # content {
border: 1 pxsolid # 000;
position: relative;
top: - 50%;
} </pre>
</div>
</div>
</div>
</body>
</html>

P.S. vertical center vertical - align value is middle, and the horizontal center align value is center, although with is in the middle but different keyword
# 0 - #


This concludes the body part