元素水平居中和垂直居中的方式
關(guān)于居中的問(wèn)題，一直處于疑惑不解的狀態(tài)，知道的幾種方法好像也不是每一次都會(huì)起到作用，所以更加迷惑。主要是不清楚該
在什么情況下采用哪種解決方法，所以，整理了一些方法，梳理一下思路，做一個(gè)總結(jié)。
1. line-height使單行文本垂直居中
對(duì)于單行文本，可以設(shè)置它的行高等于它父容器的高度，這樣就實(shí)現(xiàn)了該文本的垂直居中，但是此方法只適用于單行文本。
（其實(shí)嚴(yán)格意義上來(lái)說(shuō)，文字并不是絕對(duì)的垂直居中的，有那么很小的幾像素差距，只是我們看上去它是居中的；這里的原因，就是文本的基線對(duì)齊的因素了，感興趣的朋友可以再深入地去了解一下，這里我就不展開(kāi)了）平時(shí)這樣用就可以了。
對(duì)于多行文本，設(shè)置line-height就無(wú)法實(shí)現(xiàn)了，在這里有一個(gè)方法比較好。
還記得剛學(xué)習(xí)html的時(shí)候，大家應(yīng)該都記得表格table吧，在每一個(gè)單元格里，如果我們想要讓里邊的文本垂直居中的話，用到的屬性是 vertical-align：middle；所以在多行文本的情況下，就可以用的這個(gè)屬性。
前提條件是，我們需要給文本再加一層標(biāo)簽，這里在 box3 中，我用 span 標(biāo)簽把文字包了起來(lái)。
給 span 的父級(jí)元素 div.box3 設(shè)置 display:table；給 span 設(shè)置display:table-cell;vertical-align:middle; 就可以了。
這里我沒(méi)有考慮IE低版本兼容性問(wèn)題，可以參考下方的推薦閱讀，做進(jìn)一步了解。
示例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{
網(wǎng)友評(píng)論
