應用的地方比較普遍，這裡有兩個赤裸裸的栗子：
也有很多流行的方案，這裡只針對各種方案的適用場景來做一些分析
其實，垂直居中問題可以簡化成這樣：乙個容器html元素(#container)，乙個需要居中的html元素(#center)。特殊的情形下可能會出現body為#container，#center是,此處不予討論。 #center 可能有高度，也可能沒有，也可能是響應式的。總之，**的結構如下圖所示：
再有就是瀏覽器的相容性問題：ie6,ie7.....不說了，都是淚。總之，我們要做的就是在相應的**處填入**以期達到下圖目的。：
這種方案應該是最流行的，思路也比較簡單，瀏覽器的相容性(ie6+)也比較好，但是必須要指定#center的高度，也無法進行響應式處理(類似height:60%,max-width:400px；)
如果能確定#center高度，並且無需響應式，這種方案是最棒的！
該方法相容ie8+，雖然可以自適應，雖然padding可以不用操心，但是還是必須宣告高度！關於這種方案的工作原理：
這種方案是方案一的一種延伸，它解決了方案一必須指定高度，不支援響應式的問題，但是瀏覽器相容性不佳，只支援ie9+，但是在移動版的瀏覽器卻可以放心的使用哦！
另外，這種方案可能需要在transform上加入字首，不過如果有less和sass這樣的東西就好多了，瞬間，又有了對ie的鄙視！
思路是這樣的:i am centered
，**是這樣的：
由於相容上的一些問題，這個方案，不太建議。
思路為：期望在#container中:text-align:center;，在#center中：vertical-align:middle;達到目的，但是#center卻無法撐開#container，咋辦呢？
可以在#container裡面加入乙個多餘的display為inline-block的div（作為#container的乙個child），將#container的高度撐開，就像這樣：
如果支援:before或者:after的瀏覽器，就可以高大山一些：
但是，還存在如下兩個問題：
這個應該是最簡單的，如下：
原理為：margin:auto;自動獲取伸縮容器中剩餘的空間，設定垂直方向margin值為auto，可以使伸縮專案在伸縮容器的兩上軸方向都完全集中。我覺得，實際上相當於這樣：
關於flexbox，請參見 這裡
但是flex的缺點也是顯而易見的，不支援老舊的瀏覽器。
以上各種方案，各有優缺，希望大家趕緊提建議，我也將能夠通用的**全部整到了github上（這裡）
CSS垂直居中解決方案
博主回來了。本來在github上布了blog，後面換公司，部落格md檔案都忘記拿走了 乙個原先同學問我 css怎麼垂直居中呀 一看就沒好好學習過。盆友們可能有的只是需要 自己去拿吧 這是針對image的 我也懶得改了 我所知道的4種方式 其他的不是不行，而是我不常用 容器 父元素 line heig...
CSS水平居中和垂直居中解決方案
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...
垂直居中的解決方案
下面是比較專業的垂直居中的集中解決方案。記錄於此，以便查閱。1 單行垂直居中 文字在層中垂直居中vertical align 屬性是做不到的.我們這裡有個比較巧妙的方法就是 設定height的高度與line height的高度相同 example source code www.52css.com ...