单行文字垂直居中，多行文字垂直居中

最新推荐文章于 2022-06-25 08:19:18 发布

马优晨

最新推荐文章于 2022-06-25 08:19:18 发布

阅读量2.3k

点赞数

分类专栏：小技巧前端开发文章标签：单行文字垂直居中多行文字垂直居中

本文链接：https://blog.csdn.net/qq_24147051/article/details/79205793

版权

前端开发同时被 2 个专栏收录

233 篇文章 27 订阅

订阅专栏

小技巧

133 篇文章 4 订阅

订阅专栏

这里通过下面一个实例来讲一下单行文字居中和多行文字居中的方法：

一、单行文字居中

原理：

       使用height 和 line-height，相等的原理。

二、多行文字居中

原理：

       将多行文字当做一张图片去处理，使其居中。

代码：

	<html>
	    <head>
	    <title>Mr企鹅先森</title>   
	    <style type="text/css">
	       html{
	          font-size: 14px;  
	       }
	      .only{
	          border: 1px solid red;
	          padding: 10px 10px;
	          height: 30px;
	          line-height: 30px;
	      }
	      .box_2{
	        display: table-cell;
	        width: 550px;
	        height: 1.14rem;
	        padding: 2rem 2rem;
	        border: 4px solid #beceeb;
	        color: #069;
	        font-size: 10rem;
	        vertical-align: middle;
	       }
	      .word{
	        display:inline-block; 
	        font-size:0.1rem; 
	       }
	    </style>
	    </head>
	    <body>
	        <div class="only">111111111</div>
	        <div class="box_2">
	            <span class="word">
	                这里显示多行文字。vrbrtbtrnyynnnnnnnnnnnnnnnnnnnnnnnnnnnn
	                nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnbntrsssssssssssssssss
	                gerrfewe23e23r3433g43g343fr2323r23nnnnnnnnnnnnnnnnnnry
	                 ooooooooooooooooooooooooooooooooooooooooooooooooooooo</span>
	        </div>
	    </body>      
	</html>