How to center an absolutely positioned element?

Question

css

Actually, here is an example of the layout
codepen.io/heyjoe/pen/ZbBOPG
The problem is that when the width of the browser window changes (downwards), the centering disappears.
Can you please tell me how to set the centering of the input-wrapper element so that it takes effect when the width of the browser window changes?

Answer 1

With unknown width and height, you can do this:

top:50%;
left:50%;
transform:  translate(-50%,-50%);
-webkit-transform:  translate(-50%,-50%);
-moz-transform:  translate(-50%,-50%);
-o-transform:  translate(-50%,-50%);
-ms-transform:  translate(-50%,-50%);