Центрирование внутри контейнера для жидкости

Question

У меня есть конкретная ситуация. Я хочу вертикально выровнять один элемент (кнопка в этом случае), с положением: абсолютным и внутренним изменяемым размером div, абсолютно позиционированным тоже (пытается получить жидкую компоновку).

HTML:

<div id="container"> 

<div id="first-block-call" class="call-to-action"> 
<input name="continue" type="button" class="buttonb" value="CONTINUEZ"> 
</div> 
    </div> 

CSS:

#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; 



} 

В настоящее время КСС беспорядок, я пытался получить изменяемую кнопку, тоже без успеха, но теперь я хочу, чтобы выровнять его по вертикали , по крайней мере ...

Fiddle: http://jsfiddle.net/c0jj5xya/

Чтобы получить четкое (и Bigge r), вы можете перейти к: http://bybyweb.com/snail-secret/fluid/ и изменить размер экрана с 768px до 989px, тогда вы можете получить весь контекст (возможно, мне придется сделать дополнительный/новый html) ...

P.S. Вы заметите, что идеального 50-процентного выравнивания недостаточно в этом случае, фонового изображения/макета является специфическим ... так что нужна дополнительная математика, это означает, что приветствуются javascript/jquery! Но я заметил, что я не могу получить точную высоту DIV с множеством значений макс высота ... :(

Answer 1

Установка height из .call-to-action в 47px, а затем добавить

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

к .call-to-action input.buttonb выравнивает . кнопка вертикально

См here