垂直居中但在窗口缩小时保持顶部和底部粘性[重复]

Question

如何才能完成下面的这个css问题？

这是指屏幕有足够的空间来保持元素可见。

但是一旦窗口缩小并且没有足够的空间使它们以原始大小保持可见，顶部和底部元素会粘在原始大小的垂直边上，并且只有中间元素会缩小。

我陷入了这种状态。乍一看几乎接近答案，但实际上并非如此......

http://embed.plnkr.co/AJXYCGEVzMPt1My0xehA/

堆栈sn-p

/* Styles go here */

.wrapper {
  height: 100vh;
}

.top {
  width: 40%;
  height: 50px;
  background-color: green;
}

.middle {
  width: 90%;
  height: 300px;
  background-color: blue;
  margin-top: 30px;
  margin-bottom: 30px;
}

.bottom {
  width: 20%;
  height: 50px;
  background-color: red;
}

<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    
    <div class="wrapper d-flex flex-column align-items-center justify-content-center">
      <div class="top col-auto">Top Element</div>
      <div class="middle col-auto">Middle Element</div>
      <div class="bottom col-auto">Bottom Element</div>
    </div>

Answer 1

如果我正确理解您想要做什么，那么 flex 就是一种方式。

只需设置一个具有最大高度的 flex-container（具有实际的 height 属性，不要使用 max-height 否则它的弹性项目将无法增长，而中间的项目将不会增长完全显示），然后将底部和顶部元素设置为flex:0 0 100px，这样它们就不会增长/缩小，并允许中间元素使用flex: 1 1 auto;进行增长和缩小

并且将 body 本身也设置为 flex-container，因此 flex-container 也是一个可以通过 justify-content 轻松居中的 flex-item

实际工作版本： https://embed.plnkr.co/pajfCNCacQX6kuBf6I8z/

这是一个 SO sn-p... 无法调整大小，因此无法用于测试，只是为了保证代码安全：

body{
  height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.container{
  display:flex;
  flex-direction:column;
  height: 500px;
}

.top{
  background:CornflowerBlue;
  flex: 0 0 50px;
}

.center{
  flex:1 1 auto;
  margin:10px 0;
  background:salmon;
}

.bottom{
  flex: 0 0 50px;
  background:MediumSeaGreen ;
}

<body>
    <div class="container"> 
      <div class="top">
      </div>
      <div class="center">
      </div>
      <div class="bottom">
      </div>
    </div>
  </body>

Answer 2

您需要在顶部和中间 div 中使用 flex-shrink:0，以便在调整视口大小时它们不会缩小

Fiddle Link ▸

堆栈片段

body {
  margin: 0;
}

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.top,
.bottom {
  margin: 0 30px;
  flex-shrink: 0;
  background: red;
}

.middle {
  background: blue;
  overflow: auto;
}

<div class="parent">
  <div class="item top">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="item middle">. Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur
    ex tristique. Nunc in cursus sem. . Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem.</div>
  <div class="item bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta massa vitae lacus cursus, mattis consectetur ex tristique. Nunc in cursus sem.</div>
</div>