多行文字垂直居中-优快云博客

本文介绍了如何在网页中实现文字上下居中的布局技巧，包括针对不同浏览器的样式调整，确保网页在各种设备上都能呈现出良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>