CSS Tutorial Div Vertical centering of various methods

This article mainly for you in detail the CSS Tutorial p Vertical center of a variety of methods, but also includes the method of vertical center of multiple lines of text, interested in small partners can refer to

When it comes to this question, perhaps someone will ask that CSS does not have the Vertical-align property to set the vertical center? Even some browsers do not support I just need to do a little bit of CSS hack technology can AH! So here I have to say two more words, there is a Vertical-align property in CSS, but it only takes effect on elements that have valign attributes in the (X) HTML element, such as <td>, <th>, < in table elements Caption> and so on, and elements like <p> and <span> have no valign characteristics, so using vertical-align does not work for them.

One, single line vertical center

If there is only one line of text in a container, it is relatively simple to center it, and we only need to set its actual height to line-height equal to the height of the row.

Such as:

p {              height:25px;              line-height:25px;              Overflow:hidden;       }

This code is simple, and the settings behind using Overflow:hidden are designed to prevent the content from exceeding the container or creating a wrap, so that the vertical center effect is not reached.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


Two, the vertical center of multiple lines of unknown height text

If a piece of content, its height is variable, then we can use the previous section of the implementation of the horizontal center used to the last method, is to set the padding, the upper and lower padding values are the same. Similarly, this is a "look" of the vertical center, it is only to make the text <p> completely filled with a adapting just. You can use code similar to the following:

p {       padding:25px;      }
The advantage of this approach is that it can be run on any browser, and the code is simple, but the premise of this approach is that the container's height must be scalable.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Three, multi-line text fixed height of the center

At the beginning of this article, we have said that the Vertical-align property in CSS only works on the (X) HTML tag that has the valign attribute, but there is also a display property in the CSS that simulates <table> So we can use this property to let <p> simulation <table> can use Vertical-align. Note that the use of display:table and Display:table-cell must be set on the parent element, which must be set on the child element, so we need to add a <p> element for the text that needs to be positioned:

p#wrap {          height:400px;       display:table;      }      p#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 ">


This method should be ideal, but unfortunately Internet Explorer 6 does not correctly understand display:table and Display:table-cell, so this approach is in Internet Explorer Versions 6 and below are not valid. Well, it's so depressing! But we have other options.



Iv. Solutions in Internet Explorer

In Internet Explorer 6 and the following versions, there is a flaw in the computational height. After the parent element is positioned in Internet Explorer 6, the base of the calculation appears to be inherited if the sub-element is calculated as a percentage (if the numeric value is an absolute value without the problem, but the basis for using a percentage calculation is no longer the height of the element. and the location height inherited from the parent element). For example, we have the following (X) HTML snippet:

<p id= "wrap" >      <p id= "Subwrap" >        <p id= "Content" >      </p>     </p>   </ P>
If we have an absolute positioning of the subwrap, then the content will inherit this attribute, although it will not appear in the page immediately, but if the content is relatively positioned, you will not use the 100% ratio is the content of the original height. For example, we set the position of Subwrap to 40%, we must set the top:-80% if we want to overlap the top edge of the content with wrap, so if we set the top:50% of Subwrap, we must use 100% To get the content back to its original location, but what if we set the content to 50%? So it's just vertically centered. So we can use this method to achieve vertical centering in Internet Explorer 6:



P#wrap {          border:1px solid #FF0099;       Background-color: #FFCCFF;       width:760px;        height:400px;       position:relative;      }      p#subwrap {        position:absolute;          border:1px solid #000;          top:50%;      }      p#content {          border:1px solid #000;          position:relative;          top:-50%;      }


Of course, this code can only work in browsers that have problems with computing such as Internet Exlporer 6. (But I do not understand, I read a lot of articles, do not know because the source of the same or what reason, it seems that many people do not want to explain the Internet Exlporer 6 The principle of this bug, I just know a little fur, but also to study)



<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Five, perfect solution



Then we can combine the above two methods to get a perfect solution, but this need to use the knowledge of CSS hack. If you use CSS hack to differentiate your browser, you can

To refer to this "simple CSS hack: differentiate IE6, IE7, IE8, Firefox, Opera":

p#wrap {          display:table;          border:1px solid #FF0099;       Background-color: #FFCCFF;       width:760px;        height:400px;       _position:relative;         Overflow:hidden;      }      p#subwrap {          vertical-align:middle;          Display:table-cell;         _position:absolute;         _top:50%;      }      p#content {         _position:relative;         _top:-50%;      }


At this point, a perfect centering scheme is produced.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">