<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>上下居中</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body,p,div{ margin: 0; padding: 0;}
/*For Firefox Chrome*/
.box { border:1px #ddd solid; height:300px; overflow:hidden; display:table; margin:50px; position:relative;}
.box .text{display:table-cell;vertical-align:middle;}
/*For IE7*/
*+html .box .text{ display: block; position:absolute; top:50%; width:100%; height:auto;}
*+html .box .text p{ position:relative; top:-50%;}
/*For IE6*/
*html .box .text{position:absolute; top:51%; width:100%; height:auto; display:block;}
*html .box .text p{position:relative; top:-50%;}
</style>
</head>
<body>
<div class="box">
<div class="text">
<p>
这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
</p>
</div>
</div>
</body>
</html>
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
