When talking about this issue, some people may ask, isn't there a vertical-align attribute in CSS to set vertical centering? Even if some browsers don't support it I just need to do a little CSS
Hack technology is enough! So I have to say a few words here. There is indeed a vertical-align attribute in CSS, but it only occurs for elements that have the valign attribute in the (X) HTML element.
Effective, such as <td>, <th>, <caption>, etc. in table elements. Elements such as <div> and <span> do not have the valign feature, so vertical-align cannot be used on them.
effect.
Related tutorial: N ways to center div horizontally
1. Single row vertical centering
If there is only one line of text in a container, it is relatively simple to center it. We only need to set its actual height to be equal to the height of the line-height.
like:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
This code is very simple. The overflow:hidden setting is used later to prevent the content from exceeding the container or causing automatic line wrapping, so that the vertical centering effect cannot be achieved. More CSS Teach
Procedure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Vertically center a single line of text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>Now we want to center this text vertically! </div>
</body>
</html>
2. Vertical centering of multiple lines of text of unknown height
If the height of a piece of content is variable, then we can use the last method used to achieve horizontal centering mentioned in the previous section, which is to set Padding so that the upper and lower
The padding values can be the same. Again, this is a "look" way of vertical centering, it's just a way of making the text completely fill the <div>. You can use something like
The following code:
div {
padding:25px;
}
The advantage of this method is that it can run on any browser, and the code is very simple, but the prerequisite for the application of this method is that the height of the container must be scalable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Vertical centering of multi-line text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>Now we want to center this text vertically!
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html>
3. Centering multi-line text with fixed height
At the beginning of this article, we have said that the vertical-align attribute in CSS will only work on (X)HTML tags with valign attributes, but there is also a display in CSS
The attribute can simulate <table>, so we can use this attribute to make <div> simulate <table> and use vertical-align. Note that display:table and
How to use display:table-cell, the former must be set on the parent element, and the latter must be set on the child element, so we need to add another <div> element for the text that needs to be positioned:
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Vertical centering of multi-line text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>Now we want to center this text vertically! Webjx.Com
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>
This method would be ideal, but unfortunately Internet Explorer 6 does not correctly understand display:table and display:table-cell, so this method is used in
It is invalid in Internet Explorer 6 and below. Well, that’s depressing! However, we have other methods. 4. Solution in Internet Explorer
In Internet Explorer 6 and below, there is a flaw in height calculations. After positioning the parent element in Internet Explorer 6, if you then position the child element
When performing percentage calculations, the basis of calculation seems to be inherited (if the positioned value is an absolute value, there is no problem, but the basis of calculation using percentage will no longer be that of the element)
height, while the positioning height is inherited from the parent element). For example, we have the following (X)HTML code snippet:
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
If we perform absolute positioning on subwrap, then the content will also inherit this attribute. Although it will not be displayed immediately on the page, if the content is further positioned
When rows are positioned relative to each other, the 100% ratio you use will no longer be the original height of the content. For example, if we set the subwrap position to 40%, if we want to make the content
If the edge overlaps with wrap, top:-80% must be set; then, if we set subwrap's top:50%, we must use 100% to return the content to its original position.
, but what if we also set the content to 50%? Then it's exactly vertically centered. So we can use this method to achieve vertical centering in Internet Explorer 6:
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
Of course, this code will only work in browsers with computing issues such as Internet Exlorer 6. (But I don’t understand. I checked a lot of articles and I don’t know if it’s because of the
Are they the same or for some reason? It seems that many people are unwilling to explain the principle of this bug in Internet Exlporer 6. I only have a superficial understanding and need to study it further)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Vertical centering of multi-line text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-size:12px;font-family:tahoma;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Now we want to center this text vertically!
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
5. The perfect solution
Then we can get a perfect solution by combining the above two methods, but this requires the knowledge of CSS hack. For using CSS Hack to distinguish between browsers, you can
Please refer to this "Simple CSS hack: Differentiate IE6, IE7, IE8, Firefox, Opera":
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_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 centering solution is created.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Vertical centering of multi-line text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_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>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Now we want to center this text vertically!
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>
ps The value of vertical centering vertical-align is middle, while the value of horizontal centering align is center. Although they are both centered, the keywords are different.