這幾天在工作中遇到了一個小問題：文字內容怎麼能在div裡水平垂直居中顯示呢？同時群裡的小夥伴恰巧也有提問這個問題的，所以我就總結了一下我知道的方法。

一、利用行高(line-height)和vertical-align配合實現

具體做法如下：

html:

<div class="box">
    <span>測試文字</span>
</div>

css:

.box{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #ccc;
    text-align: center;
}
.box span{
    vertical-align: middle;
    line-height: 200px;
}
 

這個地方要注意的是：在.box加line-height與span加line-height的結果是有些許差別的。

結果：

但是這樣寫存在一個算是挺致命的缺點，當文字存在折行的情況怎麼辦？例如：

html：

<div class="box">
    <span>測試文字測試文字測試文字測試文字</span>
</div>

css：

.box{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
}
.box span{
    vertical-align: middle;
    line-height: 200px;
}
 

結果：

很明顯，這樣的結果不是我們想要的，所以這個方法不是很完美的做法。

二、利用display:table-cell實現水平垂直居中顯示

這種方法我是從網上搜來的，具體做法如下：

html：

<div class="cell">
    <span>測試文字測試文字測試文字測試文字</span>
</div>

css：

.cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border: 1px solid #666;
    background: #ccc;
}
 

結果：

這種做法無疑是可以解決水平垂直居中顯示的問題，而且就算折行也沒有關係，但是它不支援margin屬性了，其他不支援什麼屬性我沒試過，但是我想會跟table內td不支援的屬性大差不差。個人感覺比第一種方法要好一些。

三、利用定位方式(position)+css的transform實現水平垂直居中顯示

這種方法是我經常使用的一種方法，但是如果需要相容較低版本的瀏覽器的話不太實用。具體方法如下：

html：

<div class="box">
    <span>測試文字測試文字測試文字測試文字</span>
</div>

css：

.box{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
    position: relative;
}
.box span{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

結果：

這種方式採用了絕對定位，把文字內容定位到外層div(.box)的正中位置，他們的中心點是重疊的，從而實現水平垂直居中顯示。這個方法不僅僅實用與文字內容，也適用於div、img等其他html元素。

以上的三種方法就是我比較常用的幾種文字水平垂直居中顯示的方式，可能還有其他方法我沒有用到，歡迎大家給予指正和補充。當然實現居中之後的樣式我這裡設定的比較簡單，大家可以自由發揮使其更加漂亮。

第一次寫技術部落格，不足的地方還希望不吝賜教。