有时候我们需要实现下面这种效果：
嘎嘎，撑大高度不让你剧中
嘎嘎，撑大高度不让你剧中
嘎嘎，撑大高度不让你剧中
嘎嘎，撑大高度不让你剧中
嘎嘎，撑大高度不让你剧中
嘎嘎，撑大高度不让你剧中
嘎嘎，撑大高度不让你剧中
我要居中
直接上代码：
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%;}
