垂直居中未知高度

Question

我試圖在沒有固定/指定高度的DIV中垂直居中圖像。我試過建立在Centering in the unknown article on CSS Tricks上，但爲了工作，你需要指定高度。而不是欺騙文章標題。

這裏是我的JS小提琴：http://jsfiddle.net/6J2WA/

這是想什麼我（圖片）：http://cl.ly/image/1k0h262c2c3s

CSS

/* This parent can be any width and height */ 
.block { 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can 
also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 


.inner { 
max-width: 960px; 
margin: 0 auto; 
overflow: hidden; 
    background: #ef4; 
} 

.c-3 { 
width: 29.3%; 
float: left; 
margin-left: 6%; 
    background: #e4f; 
} 

#you-and-us .c-3 { width: 33.5%; } 
#you-and-us .c-3:first-child { text-align: right; margin: 0; } 
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; } 

Answer 1

你不能使用僞元素的原因技巧是因爲你沒有足夠的祖先元素，其元素的高度是100％的高度。

如果您拋出浮標並將display: table-cell用於您的.c-3元素，則可以簡化整個工作。

http://jsfiddle.net/6J2WA/5/

/* This parent can be any width and height */ 
.block { 
    text-align: center; 
} 

.inner { 
    max-width: 960px; 
    margin: 0 auto; 
    overflow: hidden; 
    background: #ef4; 
} 

.c-3 { 
    display: table-cell; 
    background: #e4f; 
} 

#you-and-us .c-3 { width: 33.5%; } 
#you-and-us .c-3:first-child { text-align: right; } 
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; background: yellow; vertical-align: middle; }