Centering div that can be bigger than body - html

Question

I'm working on project which includes a login/register page. It's basically a white div in body which should be centered verticaly and horizontally, but sometimes can be bigger than body.
When div is small everything is okay, but when its bigger than body then I just want it to have small padding on top and bottom.
How can I achieve that ? I have been searching for answer whole day and finally I'm here. Help me people :C
#wrap {
height: 300px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>

Answer 1

You can use min-height instead of height and a small top and bottom padding on the wrapper as shown below. When the inner element is higher than the wrapper, it will extend the wrapper and additionally keep the padding .
#wrap {
min-height: 300px;
padding: 10px 0;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>

Answer 2

Use min-height instead of height, and add padding to top and bottom. Use box-sizing: border-box to prevent the padding from changing the height:
.wrap {
box-sizing: border-box;
min-height: 300px;
width: 150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
.content {
background: #000;
width: 100px;
height: 400px;
}
/** for the demo **/
.content--small {
height: 100px;
}
body {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
<div class="wrap">
<div class="content">
</div>
</div>
<!-- for the demo -->
<div class="wrap">
<div class="content content--small">
</div>
</div>