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