Shulou(Shulou.com)05/31 Report--

This article focuses on "how to achieve the vertical center of the DIV container in CSS", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to center the DIV container vertically in CSS.

DIV CSS tutorial: how to achieve Vertical centering of DIV Container

In fact, the horizontal center of CSS is relatively simple, but vertical center is a bit troublesome, because we often design pages with a fixed horizontal width. Therefore, it is necessary to summarize the ways to achieve vertical centering in the process of CSS page layout.

When it comes to this question, one might ask, isn't there a vertical-align property in CSS to set vertical centering? Even if some browsers don't support me, I only need to do a little CSSHack technology. So I would like to say a few words here, it is true that there is a vertical-align attribute in CSS, but it only works on elements in (X) HTML elements that have valign attributes, such as, and so on, while elements like, do not have valign features, so using vertical-align does not work on them.

1. One-way vertical center

If there is only one line of text in a container, it is relatively easy to center it, we just need to set its actual height height equal to the height of the line line-height. Such as:

ExampleSourceCode

DIV {height:25px; line-height:25px; overflow:hidden;}

This code is simple, and the overflow:hidden setting is used later to prevent content from exceeding the container or generating automatic line wrapping, so that the vertical centering effect is not achieved.

SourceCodetoRun

52CSS.com body {font-size:12px;font-family:tahoma;} DIV {height:25px; line-height:25px; border:1pxsolid#FF0099; background-color:#FFCCFF;} now we want to center this text vertically!

[you can modify part of the code before running to view the effect]

However, in InternetExplorer6 and below, this and method do not support vertical centering of images.

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 method we used when the implementation level is centered in the previous section, which is to set the Padding so that the padding values are the same up and down. Similarly, this is also a "seemingly" vertical center, it is just a kind of visit to make the text completely filled. You can use code similar to the following:

ExampleSourceCode

DIV {padding:25px;}

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

SourceCodetoRun

52CSS.com body {font-size:12px;font-family:tahoma;} DIV {padding:25px; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px;} now we want to center this text vertically! DIV {padding:25px; border:1pxsolid#FF0099; background-color:#FFCCFF;}

[you can modify part of the code before running to view the effect]

Third, the center of the fixed height of multi-line text

At the beginning of this article, we said that the vertical-align attribute in CSS only works on the (X) HTML tag that has the valign feature, but there is also a display attribute in CSS that can be simulated, so we can use this attribute to make the simulation available to vertical-align. Note that the use of display:table and display:table-cell must be set on the parent element and the latter on the child element, so we need to add another element to the text that needs to be located:

ExampleSourceCode

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

SourceCodetoRun

52CSS.com body {font-size:12px;font-family:tahoma;} DIV#wrap {height:400px; display:table;} DIV#content {vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px;} now we want to center this text vertically! DIV#wrap {height:400px; display:table;} DIV#content {vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px;}

[you can modify part of the code before running to view the effect]

This approach should be ideal, but unfortunately InternetExplorer6 does not understand display:table and display:table-cell correctly, so it does not work in InternetExplorer6 and later versions. Well, it's very depressing! But there are other ways.

Fourth, the solution in InternetExplorer

In InternetExplorer6 and below, there are defects in high calculation. After positioning the parent element in InternetExplorer6, if you calculate the percentage of the child element, the basis of the calculation seems to be inherited (if the positioning value is absolute, there is no problem, but the basis for using the percentage calculation will no longer be the height of the element, but the positioning height inherited from the parent element). For example, we have the following (X) HTML code snippet:

ExampleSourceCode

If we absolutely locate subwrap, then content will inherit this attribute, although it will not be immediately displayed on the page, but if you relative locate content, the 100% score you use will no longer be the same height as content. For example, we set the position of subwrap to 40%, and we have to set top:-80%; if we want the upper edge of content to coincide with wrap, so if we set top:50% of subwrap, we have to use 100% to get content back to its original position, but what if we set content to 50%? Then it happens to be centered vertically. So we can use this method to achieve vertical centering in InternetExplorer6:

ExampleSourceCode

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

Of course, this code only works in browsers with computing problems such as InternetExlporer6. (however, I do not understand. I have consulted a lot of articles. I do not know whether it is because of the same origin or for some reason. It seems that many people do not want to explain the principle of this Bug in InternetExlporer6. I have only scratched the surface and need to study it again.)

SourceCodetoRun

52CSS.com body {font-size:12px;font-family:tahoma;} DIV#wrap {border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative;} DIV#subwrap {position:absolute; top:50%;} DIV#content {position:relative; top:-50%;} now we want to center this text vertically! DIV#wrap {border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; height:500px; position:relative;} DIV#subwrap {position:absolute; border:1pxsolid#000; top:50%;} DIV#content {border:1pxsolid#000; position:relative; top:-50%;}

[you can modify part of the code before running to view the effect]

Fifth, the solution of *.

Then we can get a solution by combining the above two methods, but this requires the knowledge of CSShack.

ExampleSourceCode

DIV#wrap {display:table; border:1pxsolid#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 middle-of-the-road solution has emerged.

SourceCodetoRun

52CSS.com body {font-size:12px;font-family:tahoma;} DIV#wrap {display:table; border:1pxsolid#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%;} now we want to center this text vertically! DIV#wrap {border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; height:500px; position:relative;} DIV#subwrap {position:absolute; border:1pxsolid#000; top:50%;} DIV#content {border:1pxsolid#000; position:relative; top:-50%;}

[you can modify part of the code before running to view the effect]

The value of the vertically centered vertical-align is middle, while the value of the horizontal centered align is center, although the same is centered but the keyword is different.

At this point, I believe you have a deeper understanding of "how to achieve the vertical center of the DIV container in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.