在網頁中讓乙個未知高度的塊元素水平垂直居中是乙個老生常談的問題，但是總是有些特殊場景讓你無法得心應手的實現居中，本文介紹幾種常用的經典的居中方法，總有一種適合你！
1. position
.parent .child2. flex
.parent .child3. translate
.parent .child4. calc
.parent .child本文介紹的四種方法全部由以下例項驗證通過，且加了相容性字首，可以直接複製使用，建議使用時可以按順序考慮，具體可看個人習慣，反正我是這個順序，因為可以少寫很多相容性字首，大家可以放心大膽的貼上使用了，拿貼不謝！
布局如下：
效果如下：
CSS未知高度垂直居中
最近群裡這個問題比較熱門，決定把我收藏的方法分享大家。在開始時，我們先看一下萬能的table實現。執行 好了，我們看其css實現。凡是table能做到的，css都能做的，但各瀏覽器在css的差異比較大，因此要相容它們難度很大。這涉及許多細節，各種流啊，display的表現效果與css hack，ie...
CSS解決未知高度垂直居中
儘管有css的vertical align特性，但是並不能有效解決未知高度的垂直居中問題 在乙個div標籤裡有未知高度的文字或的情況下 標準瀏覽器如mozilla,opera,safari等.可將父級元素顯示方式設定為table display table 內部子元素定為table cell dis...
CSS解決未知高度垂直居中
儘管有 css 的 vertical align 特性，但是並不能有效解決未知高度的垂直居中問題 在乙個 div 標籤裡有未知高度的文字或的情況下 標 準瀏覽器如 mozilla,opera,safari 等.可將父級元素顯示方式設定為 table display table 內部子元素定為 tab...