css - 如何垂直对齐这个div？

Question

我的代码设置如下:http://jsfiddle.net/LtzhN/

我想垂直对齐容器中间的蓝色按钮，但是容器没有固定的高度。

我该怎么做，最好只用 CSS？

我知道我可以在 jquery 中做类似的事情:

var halfOuterHeight = $('.jbe-result').height()/2,
    halfButtonHeight = $('.jbe-run').height()/2;

$('.jbe-run').css('margin-top', halfOuterHeight - halfButtonHeight)

但 id 而不是!

Answer 1

您不需要按钮的特殊容器，只需要 CSS(上边距是按钮的高度 + 垂直填充的一半)。

jsFiddle Demo

.jbe-run {
    margin-top: -11px;
    padding:4px 10px;
    width:70px;
    color:#ffffff;
    font-size:12px;
    border-radius:4px;
    -webkit-border-radius:4px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 10px;
}