Div Center Display Problem Rollup

  One, single line center vertically

If there is only one line of text in a container, it is relatively simple to center it, and we just need to set its actual height and the height of the row line-height equal. such as: div {     height:25px      line-height:25px      Overflow:hidden;   ; }   This code is very simple, and the following Overflow:hidden settings are used to prevent content from exceeding the container or generating automatic line wrapping, so that the vertical center effect is not reached.                  single line text to achieve vertical center-www.cxybl.com                     &nbs P         

Now we want to get this text vertically centered!

            But in Internet Explorer 6 and the following versions, This and the method does not support the vertical centering of the picture settings.   Two, multiple lines of unknown height text vertically centered if a piece of content, its height is variable then we can use the previous section of the implementation of the horizontal center to use the last method, is to set the padding, so that the upper and lower padding values are the same. Similarly, this is a "looking" vertical center, which is simply a way to make text fill

completely. You can use code similar to the following: div {     padding:25px   }    The advantage of this approach is that it can run on any browser, and the code is simple, Only the premise of this method is that the height of the container must be scalable.                  <Title> multiple lines of text to achieve vertical center-www.cxybl.com                     &nbs P         

 Now we want to get this text vertically centered!          DIV {           padding:25px;            BORDER:1PX solid #FF0099;            Background-color: #FFCCFF;         }        

            Three, multiple lines of text fixed height of the center   at the beginning of this article, we have said that the Vertical-align property in CSS will only be for the valign attribute (X) HTML tags work, but there is also a display property in CSS that simulates simulate

element to the text that needs to be positioned:   div# Wrap {     height:400px      display:table;   }    div#content {&nbs p;    Vertical-align:middle;      Display:table-cell;      BORDER:1PX solid #FF0099;      Background-color: #FFCCFF;      width:760px;   }                     multi-line text to achieve vertical center-www.cxybl.com & nbsp                                  

         

 now we want the text to be centered vertically!             Div#wrap {              height:400px               display:table;                         Div#content {      & nbsp       Vertical-align:middle;               Display:table-cell;               border:1px solid #FF0099;               Background-color: #FFCCFF;               width:760px;                       

    &NBSP ;  

              This approach should be ideal, but unfortunately Internet Explorer 6 does not correctly understand DISPL Ay:table and Display:table-cell, so this method is not valid in the version of Internet Explorer 6 and below. Well, it's depressing! But there are other ways we can do that.   The solutions in Internet Explorer are flawed in height calculations in Internet Explorer version 6 and below. When the parent element is positioned in Internet Explorer 6, the base of the calculation appears to be inherited if the child element is calculated as a percentage (if the value being positioned is an absolute value, but the base of the percent calculation is no longer the height of the element). And the positioning height inherited from the parent element. For example, we have the following one (X) HTML code snippet:

    

       & Lt;div id= "Content" >       

    

                  multi-line text to achieve vertical center-www.cxybl.com                              &NBSP ;

        

          

 now we want to make this text vertically centered!              Div#wrap {               Border:1 PX Solid #FF0099;                Background-color: #FFCCFF;                width:760px;                height:500px;                position:relative;                           Div#subwrap { &nbs P             Position:absolute;                border:1px solid #000;                top:50%;                           Div#content { &nbs P             border:1px solid #000;                position:relative;                top:-50%;                        

        

      

          Five, perfect solution then we can get a perfect solution with the above two methods, but we need to use the knowledge of CSS hack. For the use of CSS hack to differentiate the browser, you can refer to this "simple CSS hack: distinguish IE6, IE7, IE8, Firefox, Opera": div#wrap {     display:table; nbsp;    BORDER:1PX solid #FF0099;      Background-color: #FFCCFF;      width:760px;      height:400px;    &nbsP _position:relative;      Overflow:hidden;   }    div#subwrap {     vertical-align:middle      display: Table-cell;      _position:absolute;      _top:50%;   }    div#content {     _position:relative;      _top:-50%;  &n Bsp     At this point, a perfect center solution is created.                Multi-line text to achieve vertical center-www.cxybl.com                               

        

          

 now we want to get this text vertically centered!              Div#wrap {               Border:1 PX Solid #FF0099;                Background-color: #FFCCFF;                width:760px;                height:500px;                position:relative;                           Div#subwrap { &nbs P             Position:absolute;                border:1px solid #000;               top:50%;                           Div#content { &nbs P             border:1px solid #000;                position:relative;                top:-50%;                        

        

      

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

to use vertical-align. Note that the use of display:table and Display:table-cell, which must be set on the parent element, must be set on the child element, so we add a