<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:380px;
height:200px;
_position:relative;
overflow:hidden; }
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
.p{
width:200px;
height:200px;
background-color:lightblue;
display: table;
}
.c{
display: table-cell;
width:50px;
height:50px;
background-color:lightgreen;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content">
<div style="width:100px;height:100px;background-color:black;margin:0 auto;"></div>
</div>
</div>
</div>
</body>
</html>