多行文字垂直居中

最新推荐文章于 2022-11-22 12:06:58 发布

mememama111

最新推荐文章于 2022-11-22 12:06:58 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mememama111/article/details/84483515

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

摘要生成于 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>