Html 流体容器内定心

我有具体情况。我想垂直对齐一个元素（本例中为按钮），位置为：绝对，在可调整大小的div内，位置也为绝对（尝试获得液体布局）

HTML:

目前，css很混乱，我也尝试过调整按钮的大小，但没有成功，但现在我想垂直对齐它，至少

小提琴：

要获得更清晰（更大）的图片，您可以转到：，并将屏幕大小从768px调整到989px，然后您可以获得整个上下文（可能我需要制作额外的/新的html）

---

另外，您会注意到，完美的50%对齐在这种情况下是不够的，背景图像/布局是特定的…因此，还需要一些额外的数学，这意味着-欢迎使用javascript/jquery解决方案！但我注意到，如果设置了“最大高度”值，则无法获得确切的div高度…：（

设置

的
高度
。调用action
至
47px
，然后添加

position: absolute;
top: 50%;
transform: translateY(-50%);

to
。调用操作输入。按钮b
垂直对齐按钮

请看
这段代码完全是一团糟。真的吗？我想我已经提到过了-但你能集中精力解决问题，并提出可能的解决方案吗？我认为这次的问题不是“太广泛”。）p.S.最小-最大和垂直对齐是不好的尝试（如前所述，获得居中和液体/可调整大小的按钮）是的，谢谢，但是。。。在这种情况下，这还不够。。。背景图像可调整大小->按钮应与图像上的文本“对齐”。。。我不知道如何实现->请求是液体布局->所以，div/蓝色条图像应该“包装”div的底部，按钮应该很好。。。以某种方式居中…：）@无需将顶部调整到60%。我真的不知道你们想做什么请检查有问题的页面链接，将窗口的大小从768px调整到900px，看看按钮的行为->它应该和图片中的文本在一行，在这个范围内的每个屏幕大小上。。。我现在确信我将不得不重新制作html。。。
#container {
width:100%;
    height:100px;
    position:relative;
}

.call-to-action {
    width:102.85%;

    max-height:120px;
    background-image:url('http://bybyweb.com/snail-secret/fluid/images/cures2-responsive.png');
    background-repeat:no-repeat;
    background-size:100%;
    position:absolute;
    left:-1.4%;
    bottom:-42px;




}
.call-to-action input.buttonb {

max-width:267px;
    max-height:120px;
width:202px;
height:47px;
min-width:202px;
min-height:47px;

right:2%;
top:29%;

    position:absolute;

    background-image:url('http://bybyweb.com/snail-secret/fluid/images/green-button.png');
    background-repeat:no-repeat;
    border:none;
    background-color:transparent;
    color:#e3e3e3;
    cursor:pointer;
    font-family:Arial, Helvetica, sans-serif;
    font-size:26px;
    font-weight:bold;
    line-height:42px;
    text-shadow: 0px 2px 2px rgba(150, 150, 145, 1);    
    display:block;
    background-size:100%;
    background-position:center;
    margin:0;



}

position: absolute;
top: 50%;
transform: translateY(-50%);