<!DOCTYPE html>
<head>
<title>多行文字实现垂直居中</title>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<style type="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
}
div#content{
width: 600px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content">
现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字
垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示!
</div>
</div>
</div>
</body>
</html>
<head>
<title>多行文字实现垂直居中</title>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<style type="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
}
div#content{
width: 600px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content">
现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字
垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示! 现在我们要使这段文字垂直居中显示!
</div>
</div>
</div>
</body>
</html>