CSS Tutorial: Multiple Methods of Vertically Centering divs

This article mainly introduces in detail the various methods of vertical centering of p in the CSS tutorial, including the method of vertically centering multi-line text. Interested friends can refer to it

is talking about When it comes to this question, someone may ask if there is novertical-alignattributein CSS to set vertical centering? Even if some browsers don't support it, I only need to do a little CSS Hack technology! So I have to say a few words here. There is indeed a vertical-align attribute in CSS, but it only takes effect for elements with valign attributes in (X)HTML elements, such as < in table elements. ;td>,,, etc., and elements like

,do not have valign attributes, so using vertical-align will not work on them.

1. Single-line 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 heightheightcan be equal to the heightline-heightof the row.

For example:

p { 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 automatically wrapping lines, so that the vertical centering effect cannot be achieved.

      
  
现在我们要使这段文字垂直居中显示！
  

2. Vertical centering of multi-line text of unknown height

If a piece of content, its height is adjustable Then we can use the last method used to achieve horizontal centering mentioned in the previous section, which is to setPaddingso that the upper and lower padding values are the same. Again, this is a way of "looking" vertical centering, it's just a way of making the text completely fill the

. You can use code similar to the following:

p { 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 this method is that the height of the container must be scalable of.

      
  
现在我们要使这段文字垂直居中显示！ p { padding:25px; border:1px solid #FF0099; background-color:#FFCCFF; }
        

        

         Copy after login
        
       

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 It works on (X)HTML tagwith valign attribute, but there is also adisplayattribute in CSS that can simulate

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; }

      
  
 
现在我们要使这段文字垂直居中显示！ Webjx.Com p#wrap { height:400px; display:table; } p#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; }
        

        

        

         Copy after login
        
       

This method should 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! But we have other ways

4. Solution in Internet Explorer

In Internet Explorer 6 and below , there are flaws in the calculation of height. After positioning the parent element in Internet Explorer 6, if the percentage calculation is performed on the child element, the calculation basis seems to be inherited (if the positioning value is an absolute value, there is no such problem, but using the percentage calculation basis will It is no longer the height of the element, but the positioning height inherited from the parent element). For example, we have the following (X)HTML code snippet:

If we performabsolute positioningon subwrap, then content will also inherit this attribute, although it will not It will be displayed immediately on the page, but if you position the content relatively, the 100% ratio you use will no longer be the original height of the content. For example, we set thepositionof subwrap to 40%. If we want the top edge of the content to coincide with the wrap, we must settop:-80%; then, if we When setting top:50% of subwrap, 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:

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%; }

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

      
  
 
 
现在我们要使这段文字垂直居中显示！ p#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:500px; position:relative; } p#subwrap { position:absolute; border:1px solid #000; top:50%; } p#content { border:1px solid #000; position:relative; top:-50%; }
        

        

        

        

         Copy after login
        
       

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可

以参考这篇“简单CSS hack：区分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%; }

至此，一个完美的居中方案就产生了。

      
  
 
 
现在我们要使这段文字垂直居中显示！ p#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:500px; position:relative; } p#subwrap { position:absolute; border:1px solid #000; top:50%; } p#content { border:1px solid #000; position:relative; top:-50%; }
        

        

        

        

         Copy after login
        
       

以上就是本文的全部内容，希望对大家的学习有所帮助。

The above is the detailed content of CSS Tutorial: Multiple Methods of Vertically Centering divs. For more information, please follow other related articles on the PHP Chinese website!