居中 div 可以大于主体

Question

我正在研究包含登录/注册页面的项目。它基本上是一个白色的div，应该垂直和水平居中，但有时可以比身体大。

当div 很小时，一切都很好，但是当它比身体大时，我只希望它在顶部和底部都有小填充。

我怎样才能做到这一点？我一直在寻找答案一整天，终于我来了。帮助我的人：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

您可以使用min-height而不是height，并在包装器上使用一个小的顶部和底部填充，如下所示。当内部元素高于包装器时，它将扩展包装器并另外保留填充。

#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

使用min-height而不是height，并将padding添加到顶部和底部。使用box-sizing: border-box防止填充更改高度：

.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>