当DIV没有足够的空间但保持DIV居中时,如何制作滚动条？

Question

我想创建一个居中的表单.

HTML:

<div id="profileContainer”>…</div>

CSS:

#profileContainer {
  border-radius: 25px;
  background: #ffffff;
  padding: 10px;
  width: 100%;
  max-width: 760px;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

问题是当屏幕垂直缩短时,表单的一部分会被隐藏,并且没有滚动条可以使其可访问:JSFiddle.

题:

我怎么出现滚动条时,单独的垂直空间不足,但请保留我的div水平居中和垂直方向时,有是足够的空间？

Answer 1

我会#profileContainer像这样更改CSS规则:

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 90%;
    max-width: 760px;
    display: block;
    position: relative;
    margin: 30px auto 0;
}

position: relative代替fixed,较少width,因为100%加填充超出容器的宽度.margin: 0 auto水平居中而不是left: 50%和transformX(-50%).固定margin top而不是垂直居中以避免您描述的效果.

小提琴:http://jsfiddle.net/qacv17gq/1/

增加:除了javascript/jQuery之外,当窗口/屏幕高度小于容器的高度时,您将无法垂直居中容器并且没有隐藏部分而没有滚动条.

Answer 2

使用flexbox可以轻松实现这一点，只需删除所有定位并向#profileContainer中添加以下规则即可body：

display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

前三个规则将居中#profileContainer，而最后一个规则确保主体始终至少处于视图的整个高度。

JSFiddle 没有正确显示最后一条规则，并且您的示例太大而无法将其嵌入此处，因此我将其移至 codepen。

附带说明一下，在关闭 main 之前，您有一个额外的关闭 div 标签。