方法一 ：設置盒子高度與line-height相同，本方法適用於一行文字。
圖片垂直居中 和一行文字對齊 用屬性vertical-align
小圖標和文字垂直對齊，小圖標作為背景插入
// attr：設置自己生成的屬性，像selected checked這類即使用鼠標點過 他的值是undefinded，所以自有屬性推薦用prop
包含塊（Containing Block）
某個元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的，包含塊不會特指某個元素區域，而是一塊視覺假想出來的一塊區域，理解了他就可以方便的為元素進行定位。
那怎么知道一個元素的包含塊在哪呢？
- 初始包含塊
用戶代理（比如瀏覽器）選擇根元素作為 containing block（稱之為初始 containing block）。當html的子元素沒有其他跟親近的包含塊時，會依靠初始包含塊進行定位、
初始包含塊的大小？即視口大小，，高度不會隨着html的增大而增大。 - 非絕對定位的元素，其包含塊為最近的塊級祖先元素盒子的內容邊界組成。
浮動元素也是如此，從內容邊界開始。 - 絕對元素的包含塊由最近的 position 不是 static 的祖先建立
其實這個比較復雜，需要考慮該絕對元素的包含塊是內聯還是塊級元素創建的。內聯的情況兼容性比較差，所以一般都避免讓內聯元素里面去包含塊級元素，所以大部分還都是由塊級元素創建包含塊。
其containing block 由祖先的border內邊界形成。 - 如果元素有屬性 'position:fixed'，containing block 由視口建立
作者：Miss____Du
鏈接：http://www.jianshu.com/p/413f471eeb97
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
如果父元素z-index有效，那么子元素無論是否設置z-index都和父元素一致，會在父元素上方；
如果父元素z-index失效（未定位或者使用默認值），那么定位子元素的z-index設置生效，設置成負的會被父元素覆蓋