Center a div vertically/horizontally resizing it at the same time - css

Question

As the question says, I am trying to center a div on the middle of the screen both horizontally/vertically and resize it at the same time.
I do not have any problems on resizing the content when the screen is smaller even to center the wrapper when it is displayed on big screens, the problems comes when I try to resize the screen and, as the wrapper has a max-height property, it does not never vertically center when resize the screen (because it occupy 300px all the time).
I would like that the div that is centered (wrapper) never will be more than 300px and will be always centered (both vertically/horizontally).
Here is my code:
HTML:
<div id="wrapper">
<div id="content">
</div>
</div>
CSS:
html{
width: 100%;
}
body{
width: 100%;
background-color: red;
margin: 0;
}
#wrapper{
position: absolute;
max-width: 300px;
max-height: 300px;
width: 100%;
height: 100%;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
background-color: yellow;
}
JSFiddle.
I tried a lot of configurations and looked a lot of questions here on StackOverflow but any of them worked for me because most of them are only for horizontally/vertically center or resize a div, but not both.
Note: I cannot use flexbox and I would like to maintain as much as possible the actual CSS code, if possible.
How can I avoid to use max-height (that is broken my vertically centering) and get the same behaviour?
EDIT: The div is already centered both vertically/horizontally. What I want is that the square will be always a square and always be centered. I am sorry if I do not put it very clear.
Now the content is being resize as I want (as a square), the problem is only with vertically align at the same time it resizes.
EDIT 2: If you want to see the effect that I refer in the above edit, resize the screen on my example JSFiddle horizontally and you will see the effect.
Thanks in advance!

Answer 1

You can easily do this with CSS3 transform. It depends of the browsers support you want to offer.
I would suggest to place your content absolute at 50% of your wrapper. Then, you can use a negative translate of 50%. top: 50% and left: 50% will place your content top left corner in the middle. Negative translate of 50% (translate(-50%, -50%)) will move your content half of its width to the left and half of its height to the top.
#content{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can see your updated jsfiddle
EDIT
I misunderstood a part of your question the first time. But you can easily merge a part of your solution and mine to get what you want.
You just need to replace height: 100%; with padding-bottom: 100%; of my previous answer above:
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See this updated jsfiddle.

Answer 2

Maybe I'm missing something(?), but it looks like you can just add height:100%; to your #content css instead of padding-bottom and it works:
https://jsfiddle.net/puajxgsz/
Also, I played with another way to do it without absolutely positioning anything...because, well, it was sort of interesting:
https://jsfiddle.net/j0ch7oxj/