这个问题，属于常识性的吧，可以了解了解。demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-cell垂直居中</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body,html{width:100%;height:100%;}
.ston_wrap{width:100%;height:100%;display: table;}
.ston_box{width:600px;margin:0 auto;height: 100%;}
.ston_content{display: table-cell;vertical-align: middle;background: #fcc;border:1px solid #fff;}
</style>
</head>
<body>
<div class="ston_box">
<div class="ston_wrap">
<div class="ston_content">
<h1>内容1</h1>
<h1>内容2</h1>
<h1>内容3</h1>
<h1>内容4</h1>
<h1>内容5</h1>
<h1>内容6</h1>
<h1>内容7</h1>
<h1>内容8</h1>
<h1>内容9</h1>
<h1>内容1</h1>
</div>
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/StruggleStudyhard/p/5546776.html