CSS实现不固定宽度和高度的自动居中

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

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

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

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

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

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

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

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

我要居中

直接上代码：

html:

  <div class="main"><div class="left">嘎嘎，撑大高度不让你剧中<br/> 嘎嘎，撑大高度不让你剧中<br/> 嘎嘎，撑大高度不让你剧中<br/> 嘎嘎，撑大高度不让你剧中<br/> 嘎嘎，撑大高度不让你剧中<br/> 嘎嘎，撑大高度不让你剧中<br/> 嘎嘎，撑大高度不让你剧中<br/></div><div class="right"><span>我要居中</span></div></div> 

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:

<div class="center-main"><div class="center-content"><span>内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,      内容居中,内容居中,内容居中,内容居中</span></div>
</div>

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