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

来源：https://www.cnblogs.com/yunqianduan/p/4685163.html