23
你不知道的事兒二（CSS）
在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動，border繪製三角形等7個實用技巧。由於文章長度限製，還遺留了一些技巧沒有介紹，考慮到日後可能會有更多的技巧需要補充進來，便將上文改名為你不知道的CSS（一），名字其實有點浮誇，希望能完善為一個係列，也希望該係列中介紹的技巧能夠幫助到更多人解決實際開發中遇到的問題。在這裏感謝SegmentFault的小編在微博上的推薦。本文將重點介紹CSS中未知高度容器的垂直居中技巧。同樣每個技巧將結合demo或者圖示來說明（如果demo無法打開，請自備梯子，原因你懂得）。
未知高度容器的多種垂直居中方法
在已知父子高度的情況下，實現垂直居中是很容易的事。margin ， padding，absolute + 負margin , 甚至於 line-height都是可行的方案。這裏不再展開，文章主要來介紹在父容器高度固定，子容器高度自適應的情況下，來實現其垂直居中於父級盒子的幾種方案。為了使案例更真實，我們來模擬一個垂直居中於頁麵中的彈出層(modal)。
先運行下Demo 過過癮
最後更新：2017-11-03 10:33:55