html - Centering inside fluid container -

html - Centering inside fluid container -

i have specific situation. want vertically align 1 element (button in case), position:absolute, , within resizable div, absolutely positioned, (trying liquid layout).

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

currently, css mess, i've tried resizable button, too, without success, want align vertically, @ least...

fiddle: http://jsfiddle.net/c0jj5xya/

to clearer (and bigger) picture, can go to: http://bybyweb.com/snail-secret/fluid/, , resize screen 768px 989px, can whole context (maybe have create additional/new html)...

p.s. notice perfect, 50% aligning not plenty in case, background image/layout specific...so, additional math needed too, means- javascript/jquery solutions welcome! i've noticed can't exact div height max-height value set... :(

setting height of .call-to-action 47px, adding

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

to .call-to-action input.buttonb aligns button vertically.

see here

html css