CSS Responsive Center Div

Question

I would like to center some div which has background image. There is problem with response of this div, because if I set width on 80% and height on 80% the bg-image is not on center. I tried everything, but the picture can't just stand on center and if the browser is smaller or bigger this is very big problem.

So if you look at the picture

I want to make this white block responsive.

There is a little of css which I've already written, but for now is non-responsive:

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;

Answer 1

You could use CSS transform:

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);