站長資訊網文字居中的方法：1、使用“text-align:center;”語句設置水平居中；2、利用CSS3的flex布局設置垂直居中；3、使用“vertical-align:middle;display:table-cell;”語句設置垂直居中。
本教程操作環(huán)境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css設置文字水平居中
在CSS中可以使用text-align屬性來設置字體水平居中。該屬性規(guī)定元素中的文本的水平對齊方式，通過使用center值設置文本居中。
text-align語法：
text-align : left | right | center | justify
text-align參數值與說明：
-
left : 左對齊
-
right : 右對齊
-
center : 居中
-
justify : 兩端對齊（不推薦使用，通常大部分瀏覽器不使用）
我們對text-align常用的參數值為left、right、center
該屬性有如下幾個特點：
1）、text-align的center應用在一個容器上，它只針對容器里面的文字以及容器里面的display為inline或者inline-block的容器，如果里面的容器display為block，則里面的容器的內容不會居中。
2）、text-align具有向下傳遞性，會不斷地向子元素傳遞。如果設置一個div，則其子div中的內容也會居中。
示例：
<!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>
效果圖：
（學習視頻分享：css視頻教程）
css設置文字垂直居中
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; /*設置為伸縮容器*/ 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能夠使單行文字、多行文字都居中。但是因為 table-cell 是 inline 類型，所以會導致原來的塊級元素每個 div 一行移動到了同一行。如果需要分列兩行，需要在外面額外添加容器對位置進行控制。
