css中如何設(shè)置文本居中的方法

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

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

我們先來(lái)看看css單行文本垂直居中

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

css單行文本垂直居中的實(shí)現(xiàn)代碼：

HTML：

<div id="div1">
        億速云單行文本垂直居中
    </div>

CSS：

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

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

然后再來(lái)看看多行文本垂直居中

說(shuō)明：多行文本垂直居中分為兩種情況，一個(gè)是父級(jí)元素高度不固定，隨著內(nèi)容變化；另一個(gè)是父級(jí)元素高度固定。

1、父級(jí)元素高度不固定

父級(jí)高度不固定的時(shí)，高度只能通過(guò)內(nèi)部文本來(lái)?yè)伍_。所以，我們可以通過(guò)設(shè)置內(nèi)填充（padding）的值來(lái)使文本看起來(lái)垂直居中，只需設(shè)置padding-top和padding-bottom的值相等：

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

HTML：

  <div id="div1">
            億速云多行文本垂直居中，
            億速云多行文本垂直居中，
            億速云多行文本垂直居中，
            億速云多行文本垂直居中。
    </div>

CSS：

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

2、父級(jí)元素高度固定

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

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

HTML：

<div id="outer">
        <div id="middle">
            億速云固定高度多行文本垂直居中，
            億速云固定高度多行文本垂直居中，
            億速云固定高度多行文本垂直居中，
            億速云固定高度多行文本垂直居中。
        </div>
    </div>

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; /*設(shè)置文本水平居中*/  
            width:100%;   
        }

以上是css中如何設(shè)置文本居中的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！