Summary of CSS methods to achieve vertical centering of divs in page layout_html/css_WEB-ITnose

In the previous article, I briefly summarized a "CSS method to achieve horizontal centering of divs in page layout". In fact, horizontal centering is relatively simple, but vertical centering is a bit troublesome because we design the page. Often the horizontal width is fixed. Therefore, it is necessary for us to summarize the methods to achieve vertical centering during page layout.

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 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 on elements with valign attributes in (X)HTML elements, such as

, < in table elements. ;th>, , 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 height to be equal to the line-height of the line it is in. . For example:

view plain copy to clipboard print ?

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

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.
Click here to see the running effect
However, in Internet Explorer 6 and below, this method does not support vertical centering of images.

2. Vertical centering of multi-line text of unknown height
If the height of a piece of content is variable, then we can use the last line used to implement horizontal centering mentioned in the previous section. The first method is to set the Padding so 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:

view plain copy to clipboard print ?

div { padding:25px; }

div {  padding:25px; }

This The advantage of this method is that it can run on any browser and the code is very simple. However, the prerequisite for the application of this method is that the height of the container must be scalable.
Click here to see the running effect

3. Centering multi-line text with a fixed height
At the beginning of this article, we have said that the vertical-align attribute in CSS will only work with valign features The (X)HTML tag works, but there is also a display attribute in CSS that can simulate

, so we can use this attribute to let

simulate

and then use vertical-align. Note that when using display:table and 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

element for the text that needs to be positioned:

view plain copy to clipboard print ?

div#wrap {             height:400px;       display:table;     }     div#content {                                                                                                                                                          -cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; }

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

Click here to see the running effect
This method should be ideal, but unfortunately The problem is that Internet Explorer 6 does not correctly understand display:table and display:table-cell, so this method is invalid in Internet Explorer 6 and below. Well, that’s depressing! But we have other options.

4. Solution in Internet Explorer
In Internet Explorer 6 and below, there are high computational flaws. 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:

view plain copy to clipboard print ?

  

      

  

  

   lt;/div>  

<div id="wrap">  <div id="subwrap">   <div id="content">  </div> </div>
</div>

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对 content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为 40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我 们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这 中方法来实现Internet Explorer 6中的垂直居中：

view plain copy to clipboard print ?

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

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

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

五、完美的解决方案
    那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

view plain copy to clipboard print ?

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

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

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

点击此处查看最终运行效果

p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

参考文章：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html