有时候我们需要实现下面这种效果：

嘎嘎，撑大高度不让你剧中

嘎嘎，撑大高度不让你剧中

嘎嘎，撑大高度不让你剧中

嘎嘎，撑大高度不让你剧中

嘎嘎，撑大高度不让你剧中

嘎嘎，撑大高度不让你剧中

嘎嘎，撑大高度不让你剧中

我要居中

直接上代码：

html:

    
    
     
            嘎嘎，撑大高度不让你剧中      
      
 嘎嘎，撑大高度不让你剧中      
      
 嘎嘎，撑大高度不让你剧中      
      
 嘎嘎，撑大高度不让你剧中      
      
 嘎嘎，撑大高度不让你剧中      
      
 嘎嘎，撑大高度不让你剧中      
      
 嘎嘎，撑大高度不让你剧中      
      
    
     
    
     
      
      我要居中    
     
  
    

css:

* {  padding: 0;  margin: 0;}.main {  width: 100%;  display: table;}.left {  text-align: center;  vertical-align: middle;  display: table-cell;  width: 50%;  box-sizing: border-box;  border: 1px solid #ddd;}.right {  display: table-cell;  vertical-align: middle;  text-align: center;  width: 50%;  box-sizing: border-box;  border: 1px solid #ddd;  //针对ie6的hack  _position: absolute;  _top: 50%;}.right span {  //针对ie6的hack  _position: relative;  _top: -50%;}

由 ie6 hack 想到的 内容不确定高度宽度的居中：

内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中, 内容居中,内容居中,内容居中,内容居中

html:

    
  
     
    
      内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,      内容居中,内容居中,内容居中,内容居中  
     
    

css:

* {  padding: 0;  margin: 0;}html, body {  width: 100%;  height: 100%;}.center-main {  width: 100%;  height: 100%;  position: absolute;}.center-content {  position: relative;  text-align: center;  top: 50%;}.content span {  top: -50%;}