多行文字或者单行文字的垂直居中解决方案

Posted 2020-08-07 太阳花0525

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多行文字或者单行文字的垂直居中解决方案相关的知识，希望对你有一定的参考价值。

做项目的时候经常会遇到多行文字的垂直居中，如果是单行文字直接：height:40px;line-height:40px;就可以了。如果是多行文字，用这个方法，只能看见第一行文字，基于这种情况，找到了一中比较好的方法。

<!doctype html>
<Html>
	<Head>
		<Meta Charset="Utf-8">
		<Title>文字垂直居中</Title>
		<Style>
			Div{
				Width:160px;
				Height:60px;
				Background:#e4393c;
				Display:table;
			}
			Div Span{
				Display: Table-cell;
				Vertical-align: Middle;
				Overflow: Hidden;
				Text-align: Center;
			}
		</Style>
	</Head>
	<Body>
		<Div><Span>文字垂直居中文字垂直居中文字垂直居中</Span></Div>
		<Br><Br><Br><Br>
		<Div><Span>文字垂直居中文</Span></Div>
	</Body>
</Html>

　　样式如下：

这样就可以做到垂直居中，这个是最基本的样式，如果有需要可以进行进一步的修饰。

以上是关于多行文字或者单行文字的垂直居中解决方案的主要内容，如果未能解决你的问题，请参考以下文章

大小不固定的图片和多行文字的垂直水平居中

div垂直居中的N种方法单行/多行文字(未知高度/固定高度)