元素水平居中和垂直居中的方式
關(guān)于居中的問題，一直處于疑惑不解的狀態(tài)，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該
在什么情況下采用哪種解決方法，所以，整理了一些方法，梳理一下思路，做一個總結(jié)。
1. line-height使單行文本垂直居中
對于單行文本，可以設(shè)置它的行高等于它父容器的高度，這樣就實現(xiàn)了該文本的垂直居中，但是此方法只適用于單行文本。
（其實嚴(yán)格意義上來說，文字并不是絕對的垂直居中的，有那么很小的幾像素差距，只是我們看上去它是居中的；這里的原因，就是文本的基線對齊的因素了，感興趣的朋友可以再深入地去了解一下，這里我就不展開了）平時這樣用就可以了。
對于多行文本，設(shè)置line-height就無法實現(xiàn)了，在這里有一個方法比較好。
還記得剛學(xué)習(xí)html的時候，大家應(yīng)該都記得表格table吧，在每一個單元格里，如果我們想要讓里邊的文本垂直居中的話，用到的屬性是 vertical-align：middle；所以在多行文本的情況下，就可以用的這個屬性。
前提條件是，我們需要給文本再加一層標(biāo)簽，這里在 box3 中，我用 span 標(biāo)簽把文字包了起來。
給 span 的父級元素 div.box3 設(shè)置 display:table；給 span 設(shè)置display:table-cell;vertical-align:middle; 就可以了。
這里我沒有考慮IE低版本兼容性問題，可以參考下方的推薦閱讀，做進一步了解。
示例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖
2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞
2017-07-26
- 從棧不平衡問題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式