站長(zhǎng)資訊網(wǎng)文字居中的方法：1、使用“text-align:center;”語句設(shè)置水平居中；2、利用CSS3的flex布局設(shè)置垂直居中；3、使用“vertical-align:middle;display:table-cell;”語句設(shè)置垂直居中。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css設(shè)置文字水平居中
在CSS中可以使用text-align屬性來設(shè)置字體水平居中。該屬性規(guī)定元素中的文本的水平對(duì)齊方式，通過使用center值設(shè)置文本居中。
text-align語法：
text-align : left | right | center | justify
text-align參數(shù)值與說明：
-
left : 左對(duì)齊
-
right : 右對(duì)齊
-
center : 居中
-
justify : 兩端對(duì)齊（不推薦使用，通常大部分瀏覽器不使用）
我們對(duì)text-align常用的參數(shù)值為left、right、center
該屬性有如下幾個(gè)特點(diǎn)：
1）、text-align的center應(yīng)用在一個(gè)容器上，它只針對(duì)容器里面的文字以及容器里面的display為inline或者inline-block的容器，如果里面的容器display為block，則里面的容器的內(nèi)容不會(huì)居中。
2）、text-align具有向下傳遞性，會(huì)不斷地向子元素傳遞。如果設(shè)置一個(gè)div，則其子div中的內(nèi)容也會(huì)居中。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 水平居中</title> <style> .box { width: 400px; height: 100px; background: palegoldenrod; text-align:center; } </style> </head> <body> <div class="box">css文本文字--水平居中</div> </body> </html>
效果圖：
（學(xué)習(xí)視頻分享：css視頻教程）
css設(shè)置文字垂直居中
1、CSS3的flex布局 使文字垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box{ width: 300px; height: 300px; background: palegoldenrod; line-height:300px; /*設(shè)置為伸縮容器*/ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*垂直居中*/ -webkit-box-align: center;/*舊版本*/ -moz-box-align: center;/*舊版本*/ -ms-flex-align: center;/*混合版本*/ -webkit-align-items: center;/*新版本*/ align-items: center;/*新版本*/ } </style> </head> <body> <div class="box">css 文本文字--垂直居中（彈性布局）</div> </body> </html>
效果圖：
2、vertical-align:middle +display:table-cell 使文字垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box { width: 300px; height: 300px; background: palegoldenrod; vertical-align:middle; display:table-cell; } </style> </head> <body> <div class="box">css 文本文字--水平居中</div> </body> </html>
效果圖：
說明：vertical-align:middle +display:table-cell能夠使單行文字、多行文字都居中。但是因?yàn)?table-cell 是 inline 類型，所以會(huì)導(dǎo)致原來的塊級(jí)元素每個(gè) div 一行移動(dòng)到了同一行。如果需要分列兩行，需要在外面額外添加容器對(duì)位置進(jìn)行控制。
