做项目的时候经常会遇到多行文字的垂直居中，如果是单行文字直接：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>
样式如下：
这样就可以做到垂直居中，这个是最基本的样式，如果有需要可以进行进一步的修饰。
时间： 2024-08-05 04:43:23