你對CSS中文本垂直居中問題是否了解，這裡和大家分享一下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>
[可先修改部分代碼再運行查看效果]