這幾天在工作中遇到了乙個小問題：文字內容怎麼能在div裡水平垂直居中顯示呢？同時群裡的小夥伴恰巧也有提問這個問題的，所以我就總結了一下我知道的方法。
一、利用行高(line-height)和vertical-align配合實現
具體做法如下：
html:
測試文字
.box
.box span
結果：
但是這樣寫存在乙個算是挺致命的缺點，當文字存在折行的情況怎麼辦？例如：
html：
測試文字測試文字測試文字測試文字
.box
.box span
很明顯，這樣的結果不是我們想要的，所以這個方法不是很完美的做法。
二、利用display:table-cell實現水平垂直居中顯示
這種方法我是從網上搜來的，具體做法如下：
html：
測試文字測試文字測試文字測試文字
.cell這種做法無疑是可以解決水平垂直居中顯示的問題，而且就算折行也沒有關係，但是它不支援margin屬性了，其他不支援什麼屬性我沒試過，但是我想會跟table內td不支援的屬性大差不差。個人感覺比第一種方法要好一些。
三、利用定位方式(position)+css的transform實現水平垂直居中顯示
這種方法是我經常使用的一種方法，但是如果需要相容較低版本的瀏覽器的話不太實用。具體方法如下：
html：
測試文字測試文字測試文字測試文字
.box
.box span
這種方式採用了絕對定位，把文字內容定位到外層div(.box)的正中位置，他們的中心點是重疊的，從而實現水平垂直居中顯示。這個方法不僅僅實用與文字內容，也適用於div、img等其他html元素。
第一次寫技術部落格，不足的地方還希望不吝賜教。
div文字水平垂直居中
文字居中 text align 屬性為文字水平設定，屬性有center 居中 inherit 繼承父物件的屬性 justify 兩端對齊 left 左對齊 right 右對齊 vertical align 屬性為文字垂直設定，屬性有baseline 基線 bottom inherit 繼承父物件的屬...
文字垂直水平迴圈滾動
父元素包裹時屬性 overflow hidden 水平 父元素設定了定位，子元素固定寬度，並且轉殖子元素left父元素寬度 demo demo1 li scroll sp scroll sp div scroll sp div li scroll sp div2 align center id de...
文字垂直水平對齊方式
123 div怎麼才能做到123的位置水平垂直方向的隨意變化，例如左上，中下 水平方向的話使用text align就可以了，相容性很好，關鍵是垂直方向。css也有vertival align來設定垂直方向的定位，但是它是為了table cell設計的 要用到vertical align，需要將div...