Secure contents of a div which is centered on a page - html

Question

I am placing all my content into a section with a class="wrapper". This section has a set width and height and must satisfy the following conditions:
be placed in the middle of the page, both horizontally and vertically. If window size is larger than the <section> itself, then this element has to center itself automatically.
at the same time, if window size is smaller than the <section> size, the <section> should be entirely scrollable and all elements should be viewable.
I have a problem with part 2, since when I make the window size smaller, the upper and lower borders of the <section> actually disappear behind the screen and content. It appears that the top content is "eaten" by the vertical resizing. This does not happen with the left and right borders, I am still able to view full content by scrolling.
The described problem is true for Safari, Chrome and Opera, but not for Firefox. I have not tested in IE.
I use this to center vertically and horizontally:
.wrapper{
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 660px;
width: 1200px;
border: 1px dotted yellow;
}
Obviously if I use the approach below then it does not work in Safari either, since <section> goes behind the viewport upon resizing:
.wrapper{
position: absolute;
top: 50%;
left: 50%;
margin-top: -330px; /* half of height */
margin-left: -600px; /* half of width */
height: 660px;
width: 1200px;
border: 1px dotted yellow;
}
Any advice on how to fit all content of the section will be appreciated!

Answer 1

https://jsfiddle.net/ahmadasjad/kemzkopm/13/
HTML part:
<div class="parent">
<div class="child">
<section class="wrapper">
Wrapper Section
</section>
</div>
</div>
CSS part:
.wrapper{
margin: 0 auto;
height: 100px;
width: 400px;
max-width:100%;
border: 1px dotted red;
}
.child{
vertical-align:middle;
display:table-cell;
}
.parent{
display:table;
height:100vh;
width:100%;
}