之前看到很多人一直都問這個問題，不過當時我沒當一回事，因為在 css 中要垂直居中，多數是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現的方法也不少，不一定要拘泥於和 table 布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少。現在就把我經驗拿出來分享一下，希望大家鼓鼓掌。
首先，要有乙個概念：凡是 table 布局可以實現的，css 一定可以實現。css 可以實現的，table 未必能做到。
現在來幾個例子：
一、單行內容的居中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設定 line-height 和 height，並使兩值相等，再加上 over-flow: hidden 就可以了
.middle-demo-1
優點：1. 同時支援塊級和內聯極元素
2. 支援所有瀏覽器
缺點：1. 只能顯示一行
2. ie中不支援等的居中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的布局的話，overflow: hidden 一定要
為什麼？
請比較以下兩個例子：
CSS實現完美垂直居中
之前看到很多人一直都問這個問題，不過當時我沒當一回事，因為在 css 中要垂直居中，多數是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現的方法也不少，不一定要拘泥於和 table 布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少。現在就把我經驗拿出來分享一下，希望大...
CSS實現完美垂直居中
之前看到很多人一直都問這個問題，不過當時我沒當一回事，因為在 css 中要垂直居中，多數是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實現的方法也不少，不一定要拘泥於和 table 布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少。現在就把我經驗拿出來分享一下，希望大...
CSS實現垂直居中
1 最簡單的單行文字line height垂直居中 2 垂直居中，使用line height和vertical align middle 3 使用table布局，display table和display table cell xx 4 絕對居中，使用margin auto和top bottom l...