这部分网上教程说的较多，不多说了，放上代码存档。

1   2   3   4 
       5   6  41  42  43  44 
单行文本垂直居中
 45 
     
       46 单行文本居中比较简单，只要容器的line-height和height等高即可。 height:60px; line-height:60px; 47 
     
 48 
     
 49 
多行文本垂直居中
 50 
approach1
      
       使用table布局
      
. 51 table布局简单易操作 52 
     
       53     
         54         
 55         
 56         
 57     
 58 
      
       
        
垂直顶部
        
垂直居中，使valign="middle"属性
        
垂直底部，使style=" vertical-align:bottom"属性
       
      
     
 59 
     
 60 
approach2
      
       父容器高度不定
      
 61 
     
       62 
      
父容器高度不定的情况下，使用padding是非常方便的做法
 63 
      
padding:30px;
 64 
     
 65 
     
 66 
approach3父容器高度固定
 67 
     
       68     
      
        69     父容器的父容器height:100px; display:table;
       
 70     f父容器display:table-cell; vertical-align:middle;
       
 71         CSS中有一个display属性能够模拟<table>，可以使用这个属性来让<div>模拟<table>，这样就可以使用vertical-align了。
       
注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素。     72     
      
 73 
     
 74 
     
 75 
approach3使用绝对定位法
 76 
     
       77 
      
        78 
       
         79 使用绝对定位法实现多行文本垂直居中
        
 80 height:100px; position:absolute; top:50%; margin-top:-50px;
        
 81 如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中ernet Explorer 6,7中的垂直居中：
        
 82 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 83 
       
 84 
      
 85 
     
 86 
     
       87 
      
        88 
       
         89 使用绝对定位法实现多行文本垂直居中
        
 90 height:100px; position:absolute; top:50%; margin-top:-50px;
        
 91 如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中ernet Explorer 6,7中的垂直居中：
        
 92 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 93 
       
 94 
      
 95 
     
 96 
     
 97 
approach4hackv
 98 
     
         99   
      
         100     
       
        101         
        
现在我们要使这段文字垂直居中显示！  102         
103     
       
  104   
      
  105 
     
  106 107 

至于float导致盒子模型超出标准流，以前不太明白，趁机写个代码强化一下。

1  2  3  4 
       5  6  7  8  9 
      
       10     
       
        header
       
11     
       
        div1
       
12     
       
        div2
       
13     
       
        div3
       
14     
       
15     
       
        footer
       
16 
      
17 18