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

直接上代码：

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

}