html - 在具有动态高度的垂直居中的 div 上垂直滚动

Question

我使用 display:table 和 vertical-align:middle 将具有动态高度的 div 垂直居中。

CSS

.table {
  display:table;
  height: 100%;
  width: 100%;
}

.cell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

.content {
    display: inline-block;
    width: 100px;
    overflow-y: auto; /* Useless */
}

HTML

<div class="table">
    <div class="cell">
        <div class="content">
            Then this text becomes too long, it will cause
            the .table div to expand beyond its container
            even if set to height: 100%
        </div>
    </div>
</div>

当 content div 的高度大于 table div(或者更确切地说 table div 的父级)？

JS Fiddle example

Answer 1

您可以使用 Centering in the unknown 而不是 CSS 表格方法方法:

.cell, .cell:before {
  height: 100%;
}
.cell:before {
  content: '';
  margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
  vertical-align: middle;
  display: inline-block;
}
.cont {
  max-height: 100%;
  overflow-y: auto;
}

.margin {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 32px;
  bottom: 32px;
  background: yellow;
  text-align: center;
}
.cell, .cell:before {
  height: 100%;
}
.cell:before {
  content: '';
  margin-right: -0.25em; /* Adjusts for spacing */
}
.cell:before, .cont {
  vertical-align: middle;
  display: inline-block;
}
.cont {
  width: 240px;
  padding: 0px 12px;
  background: #ddd;
  text-align: left;
  border: 1px solid #000;
  max-height: 100%;
  overflow-y: auto;
}

<div class="margin">
  <div class="cell">
    <div class="cont">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus lacinia ipsum quis pharetra. Donec vitae quam placerat lectus lobortis congue. Suspendisse maximus euismod aliquam. Ut sagittis risus vitae mauris imperdiet, ac venenatis orci dignissim. Nam felis dui, commodo non venenatis in, pulvinar a lectus. Duis lacus nulla, fringilla ut malesuada vel, iaculis ut dui. Nunc venenatis imperdiet tortor, eu sollicitudin velit vulputate finibus. In placerat justo lacus, quis faucibus leo varius ornare. Mauris vestibulum ligula in est pellentesque commodo. Donec sollicitudin dui quis quam pretium, eget sollicitudin risus pellentesque. Duis eget lacus varius, finibus augue ac, auctor eros. Proin vestibulum mauris vitae urna volutpat, non ultrices felis ultricies.</p>
    </div>
  </div>
</div>