還可以參看文章：
不需要知道子元素的尺寸：
方法一：單行文字居中===>line-height==height
方法二：父元素使用display:table和子元素使用display:table-cell屬性來模擬**，子元素設定vertical-align:middle（vertical-align屬性只對行內元素起作用，塊級元素不起作用））即可垂直居中
html**：
我也是一段測試文字
css**：
#box
#child
方法三：使用絕對定位和平移變換
html結構：
垂直居中
css**：
.box span
這種方法有乙個非常明顯的好處就是不必提前知道被居中元素的尺寸了，因為transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。
方法四：使用flex布局
html**：
程式設計師怎麼才能保護好眼睛？
css**：
#box
#child
方法五：使用vertical-align
html**：
程式設計師怎麼才能保護好眼睛？
.box
.child
.box3 span
方法二：絕對定位加0 ：通過margin:auto和top,left,right,bottom都設定為0實現居中，很神奇吧。不過這裡得確定內部元素的高度
.box4 span
CSS實現垂直居中
1 最簡單的單行文字line height垂直居中 2 垂直居中，使用line height和vertical align middle 3 使用table布局，display table和display table cell xx 4 絕對居中，使用margin auto和top bottom l...
CSS實現垂直居中
hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical align屬性，但是它只對 x html元素中擁有valign特性的元素才生效，例如 元素中的 等，而像 這樣的元素是沒有valign特性的，因此使用vertical align對它們不起作用。一 單行垂直居中 如果乙...
css實現垂直居中
一 單行內容的居中 設定height與line height相等，overflow hidden即可。demo height 20px line height 20px overflow hidden 注 若不使用overflow hidden，在瀏覽器頁面縮放時會出現問題。二 div垂直居中 注意...