## 最近的瓜有些多，一瓜未平一瓜又起，大家可能和小編一樣——都是瓜田里的猹。不過(guò)，無(wú)論怎樣，都要抽出點(diǎn)時(shí)間學(xué)習(xí)啦~~~~這兩天，有一些初學(xué)的小朋友們問(wèn)”文字如何垂直居中“，那我們今天就來(lái)談一談這個(gè)問(wèn)題哈。

首先 文字垂直居中是分單行文字和多行文字的，先來(lái)聊單行文字的垂直居中對(duì)齊。

### 單行文字垂直居中---行高等于高度值

如圖所示，我們希望這一行文字可以垂直居中；那就在代碼中設(shè)置行高=高度值。

CSS部分：

```text
<style type="text/css">
    div{
        width: 600px;
        height: 200px;
        background: pink;
        line-height:200px;
    }
</style>
```

HTML部分：

```text
<div>
        今天中午吃啥子！羅非羅非羅非魚
</div>
```

設(shè)置上述代碼后，效果圖如下

有同學(xué)好奇說(shuō)，為啥要設(shè)置行高=高度值，其實(shí)，我們拿word里面的行距 來(lái)解釋，會(huì)更具象化一些。

### 默認(rèn)樣式：

### 選擇了一個(gè)行距：

如圖所示，這一行文字占有的高度就是行高，從文字中心開始，距離下上的距離是相同的。

回到我們的上述代碼中，我們?cè)O(shè)置了行高=高度值；就是讓文字的中心距離上方是100px;距離下方也是100px;如此一來(lái)，文字也就居中了。

后來(lái)有同學(xué)又問(wèn)，為什么這個(gè)不適用于多行文本呢？我們將我們的HTML代碼中文字加多，你會(huì)發(fā)現(xiàn)每一行代碼，行高都是200px;得到的結(jié)果并不能實(shí)現(xiàn)整體居中。

HTML代碼：

```text
<div>
  今天中午吃啥子！羅非羅非羅非魚~今天中午吃啥子！羅非羅非羅非魚~今天中午吃啥子！羅非羅非羅非魚~今天中午吃啥子！羅非羅非羅非魚~
</div> 
```

所以，接下來(lái)，我們就來(lái)說(shuō)一說(shuō)，多行文本應(yīng)該如何垂直居中~~~~

### 多行文本垂直居中

HTML代碼：

多行文本垂直居中，我們一起看看效果圖，

**1、模擬表格**

將父元素div 模擬成表格table,子元素span模擬成表格單元格；讓子元素設(shè)置vertical-align:middle來(lái)實(shí)現(xiàn)。

CSS代碼：

```text
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: pink;
        display: table;
    }
    span{
        display: table-cell;
        vertical-align: middle;
    }
</style>
```

**2、模擬表格單元格**

CSS代碼：

```text
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: pink;
        display: table-cell;
        vertical-align: middle;
    }
</style>
```

**3、將子元素設(shè)置為行內(nèi)塊元素，模擬成單行文字**

將子元素設(shè)置為行內(nèi)塊元素，并且設(shè)置vertical-align:middle來(lái)實(shí)現(xiàn)，需要注意的是，子元素span會(huì)繼承父元素div的行高，所以我們需要重設(shè)一個(gè)適宜的行高。

*缺點(diǎn)：span文本的高度不能超過(guò)父元素div的高度。*

CSS代碼：

```text
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: pink;
        line-height: 200px;
    }
    span{
        display: inline-block;
        vertical-align: middle;
        line-height: 24px;
    }
</style>   
```

**4、利用定位的方式來(lái)解決**

父元素設(shè)置相對(duì)定位，子元素設(shè)置絕對(duì)定位，并且設(shè)置top：50%；margin-top:負(fù)子元素高度的一半；如果不考慮兼容問(wèn)題，我們也可以利用CSS3中 transform:translateY(-50%)來(lái)代替margin-top:負(fù)子元素高度的一半。

CSS代碼：

```text
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: pink;
        position: relative;
    }
    span{
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
</style>  
```

**5、使用flex布局**

我們可以使用彈性盒布局來(lái)實(shí)現(xiàn)這個(gè)效果。

CSS代碼：

```text
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: pink;
        display: flex;
        align-items: center;
    }
</style>
```

**6、使用網(wǎng)格布局**

當(dāng)然，我們也可以使用網(wǎng)格布局

CSS代碼：

```text
<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: pink;
        display: grid;
        align-content: center;
    }
</style>
```

這些就是我們的文字垂直居中的方式，在不同的情況去找尋最合適的方式就好。更多關(guān)于“web前端培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。