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>

居中div可以大于身体

2 个答案: