完美解决多行文字垂直居中

最新推荐文章于 2024-07-18 01:05:57 发布

疯小伙五

最新推荐文章于 2024-07-18 01:05:57 发布

阅读量1.5k

点赞数

分类专栏：布局之道文章标签：解决方案 html css

本文链接：https://blog.csdn.net/spring5530/article/details/38536479

版权

布局之道专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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"> 
body{font-size:14px;font-family:tahoma;} 
.wrap{display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden;} 
.wrap .outer{vertical-align:middle; display:table-cell; _position:absolute; _top:50%;} 
.wrap .inner{_position:relative; _top:-50%;} 
</style> 
</head> 
<body> 
<div class="wrap"> 
	<div class="outer"> 
		<div class="inner">
			<pre>
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！ 
				现在我们要使这段文字垂直居中显示！  
			</pre>
		</div> 
	</div> 
</div> 
</body> 
</html>