CSS中怎么实现文本垂直居中，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
CSS实现一行或多行文本垂直居中
在表格布局时代，不需要过多的考虑垂直居中的问题，在单元格中，默认就是垂直居中的，一行文字是垂直居中，三行文字同样也会垂直居中。进行CSS网页布局，这样的形式改变了。文字默认是居于容器顶部。
如下所示：
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ width:500px; height:200px; border:1pxsolid#03c; text-align:center; } </style> </head> <body> <dividdivid="MrJin">CSSWebDesign-div-css.net</div> </body> </html>[可先修改部分代码再运行查看效果]
在这样的情况下，如何实现文字垂直居中呢。分为三种情况：
一、如果是单行文本，可以用行距来解决问题。
在div-css.net以前的文章中，也有过这方面的介绍。
如何在父元素中垂直居中文本？
我们为它增加行距的定义，得到了单行文本垂直居中的效果。
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ width:500px; height:200px; border:1pxsolid#03c; text-align:center; line-height:200px; } </style> </head> <body> <dividdivid="MrJin">CSSWebDesign-div-css.net</div> </body> </html>[可先修改部分代码再运行查看效果]
二、如果是多行文本，父容器不固定高度。
我们可以用padding来解决问题。
设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。
以此来实现多行文本的垂直居中。
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #MrJin{ width:500px; padding:50px0; border:1pxsolid#03c; text-align:center; } </style> </head> <body> <dividdivid="MrJin"><p>CSSWebDesign-div-css.net</p> <p>致力于Web标准在中国的应用及发展</p></div> </body> </html>[可先修改部分代码再运行查看效果]
三、如果是多行文本，父容器固定高度。
这就需要用到定位，而且需要给HTML增加标签。我们不提倡这样做。
但目前这个方法可以更好的解决问题。
在容器的内部需要增设两个容器，来实现这样的效果。
MrJin、MrJin_a和MrJin_b的设置分别如下：
ExampleSourceCode
#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%; }这样设置以后，不管容器内的文本是一行，还是多行，都将会实现垂直居中对齐。
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>div-css.net</title> <styletypestyletype="text/css"> #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%; } </style> </head> <body> <dividdivid="MrJin"> <dividdivid="MrJin_a"> <dividdivid="MrJin_b"> CSSWebDesign-div-css.net </div> </div> </div> </body> </html>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
