## 最近的瓜有些多，一瓜未平一瓜又起，大家可能和小編一樣——都是瓜田里的猹。不過，無論怎樣，都要抽出點時間學習啦~~~~這兩天，有一些初學的小朋友們問”文字如何垂直居中“，那我們今天就來談一談這個問題哈。

首先 文字垂直居中是分單行文字和多行文字的，先來聊單行文字的垂直居中對齊。

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

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

CSS部分：

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

HTML部分：

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

設置上述代碼后，效果圖如下

有同學好奇說，為啥要設置行高=高度值，其實，我們拿word里面的行距 來解釋，會更具象化一些。

### 默認樣式：

### 選擇了一個行距：

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

回到我們的上述代碼中，我們設置了行高=高度值；就是讓文字的中心距離上方是100px;距離下方也是100px;如此一來，文字也就居中了。

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

HTML代碼：

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

所以，接下來，我們就來說一說，多行文本應該如何垂直居中~~~~

### 多行文本垂直居中

HTML代碼：

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

**1、模擬表格**

將父元素div 模擬成表格table,子元素span模擬成表格單元格；讓子元素設置vertical-align:middle來實現(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、將子元素設置為行內塊元素，模擬成單行文字**

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

*缺點：span文本的高度不能超過父元素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、利用定位的方式來解決**

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

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布局**

我們可以使用彈性盒布局來實現(xiàn)這個效果。

CSS代碼：

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

**6、使用網格布局**

當然，我們也可以使用網格布局

CSS代碼：

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

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