text-align:center
vertical-align:middle;vertical-align時而沒效果
然而真實使用的時候，我們會發現這個屬性「時靈時不靈」，有些情況下我們加了這個屬性之後仍然不見img或者text有任何的變化。那是因為vertical-align只作用在inline-block或者inline，還有table-cell等元素內。同時這兩種還有有所不同。
vertical-align並不是在高度內居中，而是對齊在行高內的middle線上。
所以我總結了兩種使用vertical-align居中的方法：
第一種：
文字居中這種情況下和文字可以分行顯示文字在下面同時和文字作為整體在元素內垂直居中。
第二種：
這是文字內容.
這種情況下文字是因為line-height屬性而居中，跟vertical-align屬性沒有關係。同時img對齊在middle線上，但是如果父盒子去掉了line-height屬性的話那麼將會不起作用。（可以試試bottom和text-bottom的不同。）
div文字水平垂直居中
文字居中 text align 屬性為文字水平設定，屬性有center 居中 inherit 繼承父物件的屬性 justify 兩端對齊 left 左對齊 right 右對齊 vertical align 屬性為文字垂直設定，屬性有baseline 基線 bottom inherit 繼承父物件的屬...
div水平居中及div水平垂直居中的方法總結
1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...
div水平垂直居中的方法
在平時，我們經常會遇到讓乙個div框針對某個模板上下左右都居中 水平垂直居中 其實針對這種情況，我們有很多種方法實現。方法一 絕對定位法，不確定當前div寬度和高度，採用 transform translate 50 50 當前div的父級新增相對定位 position relative 效果圖 方...