這篇文章主要介紹css中如何設置文本居中的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯公司-專業(yè)網站定制、快速模板網站建設、高性價比合水網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式合水網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋合水地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

                                                           在網頁設計的過程中，有時候可能為了布局美觀首先我們要知道通過css實現元素的水平居中較為簡單：對文本，只需要對其父級元素設置text-align: center，對div等塊級元素，只需要設置其left和right的margin值為auto；要實現元素的垂直居中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效。所以接下來我們就來看看css實現單文本垂直居中和多文本垂直居中的實現方法。

我們先來看看css單行文本垂直居中

對于單行文本，我們只需要將文本行高(line-height)和所在區(qū)域高度(height)設置一致就可以了。

css單行文本垂直居中的實現代碼：

HTML：

        創(chuàng)新互聯單行文本垂直居中
    

CSS：

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*設置line-height與父級元素的height相等*/
            text-align: center; /*設置文本水平居中*/
            overflow: hidden; /*防止內容超出容器或者產生自動換行*/
        }

css單行文本垂直居中效果如下：

然后再來看看多行文本垂直居中

說明：多行文本垂直居中分為兩種情況，一個是父級元素高度不固定，隨著內容變化；另一個是父級元素高度固定。

1、父級元素高度不固定

父級高度不固定的時，高度只能通過內部文本來撐開。所以，我們可以通過設置內填充（padding）的值來使文本看起來垂直居中，只需設置padding-top和padding-bottom的值相等：

css多行文本垂直居中代碼：

HTML：

  

            創(chuàng)新互聯多行文本垂直居中，
            創(chuàng)新互聯多行文本垂直居中，
            創(chuàng)新互聯多行文本垂直居中，
            創(chuàng)新互聯多行文本垂直居中。
    

CSS：

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*設置文本水平居中*/
            padding: 50px 20px;
        }

2、父級元素高度固定

css中的vertical-align屬性，它只對擁有valign特性的元素才生效，結合display: table;，可以使得div模擬table屬性。因此我們可以設置父級div的display屬性：display: table;；然后再添加一個div包含文本內容，設置其display:table-cell;和vertical-align:middle。

css多行文本垂直居中代碼：

HTML：

        

            創(chuàng)新互聯固定高度多行文本垂直居中，
            創(chuàng)新互聯固定高度多行文本垂直居中，
            創(chuàng)新互聯固定高度多行文本垂直居中，
            創(chuàng)新互聯固定高度多行文本垂直居中。
        
    

CSS：

#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*設置文本水平居中*/  
            width:100%;   
        }

以上是css中如何設置文本居中的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！