CSS實現水平|垂直居中漫談

原文首鏈：CSS實現水平|垂直居中漫談

利用CSS進行元素的水平居中，比較簡單，手到擒來：行級元素設置其父元素的text-align center，塊級元素設置其自己的left 和 right margins爲auto便可。而擼起垂直居中，相信於大多初擼者來講，與我類似，心裏是抗拒的。於此，以我司同事一內部分享爲基，加以蒐集完善，得8種CSS垂直居中書寫之法；箇中有示例Demo，以及代碼和優劣之評。

CSS實現水平居中(3法)

CSS實現垂直居中(8法)

CSS文本垂直居中(5法)[Update: 2016-01-06]

PS：竊覺得，對於CSS足夠熟悉的話，以CSS多種屬性組合出的「奇技淫巧」想必是層次不窮的，這裏也只是蒐集整理了其中爲你們經常使用而又簡潔的部分而已。

---

註解: 好吧，週末被「加班」了耶，搞搞需求整整Blog還算閒適；在寫居中示例時，搜腸刮肚沒什麼適宜之詞，便逼的本身「什興大發「，特胡騶幾句自黑亂言，填充內容，耶聊以慰籍；貼之於下，祈與同道者共嗨 ?。

週末把碼黃昏後，有鹹香盈袖。
莫道不消魂，獨弄鍵盤，人比黃花瘦。
真可謂：天堂有路你不走，學海無涯苦做舟。
到頭來：碼山有路勤爲徑？三十功名塵與土。
饒上個：一入'哀啼'深似海，今後'逍遙'沒長'蘇'。

PS: 更新於2015-11-25 以後在CodePen有看到一文將絕對居中闡述的更爲全面，連接以下：http://codepen.io/shshaw/full/gEiDt