CSS垂直对齐不适用于以百分比表示的百分比

Question

我有两个嵌套容器，.button-1x1和内部.button内容。我想表达.button-content维度作为百分比，如果我做垂直对齐属性不运行。它运行良好，如果我确定宽度和高度为px值。为什么？

外部容器的尺寸表示为px值，所以我认为我可以用百分比表示嵌套尺寸，这样可以保持我的CSS更加稳定。但这没有用。

小提琴这里：http://jsfiddle.net/pjZ8g/5/

代码：

<style type='text/css'> 
.absolute {position:absolute} 
.bg-teal { 
    background-color:#abc; 
} 
.button-content { 
    width:100%; /** Change this to px, and it will work */ 
    height:100%; /** Change this to px, and it will work */ 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
    text-transform:uppercase; 
} 

.button-1x1 { 
    width:230px; 
    height:230px; 
} 
</style> 
<div class='button-1x1 relative'> 
    <div class='button button-1x1 bg-teal absolute'> 
     <div class='button-content'> 
     <span>test1</span> 
     </div> 
    </div> 
</div>​ 

Answer 1

下面是一个替代方法techfoobar的。

将<div class='button button-1x1 bg-teal absolute'>样式更改为包括display:table。

见http://jsfiddle.net/pjZ8g/9/

Answer 2

检查该更新的提琴：http://jsfiddle.net/25JXw/1/

您可以通过为DIV指定line-height实现这里面要中间对齐内容。要在保持内部DIV的CSS通用性的同时执行此操作，您可以继承父代的line-height，如演示中所示。

CSS

.button-content { 
    width:100%; 
    height:100%; 
    display: block; /* change to block OR remove */ 
    vertical-align: middle; 
    text-align:center; 
    text-transform:uppercase; 
    line-height: inherit; /* new */ 
} 

.button-1x1 { 
    width:230px; 
    height:230px; 
    line-height: 230px; /* new */ 
}