CSS中如何实现文本垂直居中

这篇文章主要讲解了“CSS中如何实现文本垂直居中”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中如何实现文本垂直居中”吧！

站在用户的角度思考问题，与客户深入沟通，找到深州网站设计与深州网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖深州地区。

CSS实现一行或多行文本垂直居中

在表格布局时代，不需要过多的考虑垂直居中的问题，在单元格中，默认就是垂直居中的，一行文字是垂直居中，三行文字同样也会垂直居中。进行CSS网页布局，这样的形式改变了。文字默认是居于容器顶部。

如下所示：

SourceCodetoRun

    div-css.net  #MrJin{  width:500px;  height:200px;  border:1pxsolid#03c;  text-align:center;  }     CSSWebDesign-div-css.net

[可先修改部分代码再运行查看效果]

在这样的情况下，如何实现文字垂直居中呢。分为三种情况：

一、如果是单行文本，可以用行距来解决问题。

在div-css.net以前的文章中，也有过这方面的介绍。
如何在父元素中垂直居中文本？
我们为它增加行距的定义，得到了单行文本垂直居中的效果。

SourceCodetoRun

    div-css.net  #MrJin{  width:500px;  height:200px;  border:1pxsolid#03c;  text-align:center;  line-height:200px;  }     CSSWebDesign-div-css.net

设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。
以此来实现多行文本的垂直居中。

#MrJin{ position:static; *position:relative; height:300px; width:500px; border:1pxsolid#03c; *display:block!important; display:table!important; } #MrJin_a{ position:static; *position:absolute; display:table-cell; vertical-align:middle; *display:block; top:50%; width:100%; } #MrJin_b{ position:relative; top:-50%; text-align:center; width:100%; }

div-css.net #MrJin{ position:static; *position:relative; height:300px; width:500px; border:1pxsolid#03c; *display:block!important; display:table!important; } #MrJin_a{ position:static; *position:absolute; display:table-cell; vertical-align:middle; *display:block; top:50%; width:100%; } #MrJin_b{ position:relative; top:-50%; text-align:center; width:100%; } CSSWebDesign-div-css.net

新网创想网站建设，新征程启航

CSS中如何实现文本垂直居中

其他资讯