CSS中百分比高度的div中单行文字垂直居中实现方法：
1、css代码：
.table {
width:100%
height:100%
position:absolute
display:table
}
.cell {
display:table-cell
vertical-align:middle
width:100%
height:100%:
}
2、html代码：
<div class="table">
<div class="cell">Hello, I'm in the middle</div>
</div>
3、完整代码及运行结果：
<html>
<head>
<title>通过百分比控制文字垂直居中</title>
<style type="text/css">
.table {
width:100%
height:100%
position:absolute
display:table
}
.cell {
display:table-cell
vertical-align:middle
width:100%
height:100%:
}
</style>
</head>
<body>
<div class="table">
<div class="cell">通过百分比控制文字垂直居中</div>
</div>
</body>
</html>
一行文字垂直居中：利用line-height来设置
多行文字垂直居中：利用display:table-cell来设置。
代码以及效果：
图片垂直居中：使用绝对定位和transform
代码以及效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#box {
width: 300px
height: 300px
background: #ddd
position: relative
}
#child {
background: #93BC49
position: absolute
top: 50%
transform: translate(0, -50%)
}
</style>
</head>
<body>
<div id="child">
<img alt="" src="img/u=2639088341,2223755776&fm=27&gp=0.jpg" style="display: inline-blockvertical-align: middle" />
</div>
</body>
</html>
<div></div>垂直居中：
代码与效果：
<head>
<meta charset="utf-8" />
<title></title>
<style>
.zz {
position: absolute
top: 50%
width: 200px
height: 100px
margin-top: -50px
}
</style>
</head>
<body>
<div class="zz">
<span>测试垂直居中</span>
</div>
</body>
<div><div></div></div>里的div垂直居中：
代码与效果：
<head>
<meta charset="utf-8" />
<title></title>
<style>
.root-div{
/*注意，外容器需要指定一个height：*/
height: 700px
}
.children-div{
position: relative
top: 50%
-webkit-transform: translateY(-50%)
-webkit-transform: translateY(-50%)
transform: translateY(-50%)
}
</style>
</head>
<body>
<div class="root-div">
<div class="children-div">Hello</div>
</div>
</body>
有两点必须要注意的：1. HTML中IE条件注解部分的标签要用内联对象标签。
2. “<!--[if IE]><span class="edge"></span><![endif]-->”要放在内容之前。如果放在之后，内容是中文时会不能居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>无标题文档</title>
<style type="text/css">
.holder{
width:740px
height:300px
border:1px solid #777
text-align:center
display:table-cell
vertical-align:middle
}
/*以下样式针对IE*/
.edge{
width:0
height:100%
display:inline-block
vertical-align:middle
}
.container{
vertical-align:middle
display:inline-block
}
</style>
</head>
<body>
<div class="holder">
<!--[if IE]><span class="edge"></span><![endif]-->
<!--[if IE]><span class="container"><![endif]-->测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<!--[if IE]></span><![endif]-->
</div>
</body>
</html>
