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的父级）时，如何让{{1}} div获得垂直滚动？ / p>

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>

Answer 2

您可以添加.row元素：

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="content">Long text</div>
        </div>
    </div>
</div>

使用这个CSS：

.table {
  display: table;
  height: /* something */;
}
.row {
    display: table-row;
    height: 100%;
}
.cell {
    display: table-cell;
    height: 0;
}
.cont {
    max-height: 100%;
    overflow-y: auto;
}

这会尽可能地降低.cell的高度 - 制作.cont溢出 - 但由于.row有height: 100%，它将覆盖.table。

＆＃13;

.margin {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 32px;
  bottom: 32px;
  background: yellow;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.row {
  display: table-row;
  height: 100%;
}
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 0;
}
.cont {
  width: 240px;
  padding: 0px 12px;
  background: #ddd;
  display: inline-block;
  text-align: left;
  border: 1px solid #000;
  max-height: 100%;
  overflow-y: auto;
}

＆＃13;

<div class="margin">
  <div class="table">
    <div class="row">
      <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>
  </div>
</div>

＆＃13;

Answer 3

它不是扩展到容器之外的.table div。它是.cont div。

.cont {
    width: 240px;
    padding: 0px 12px;
    background: #ddd;
    display: inline-block;
    text-align: left;
    border: 1px solid #000;
    overflow:auto;
}

此类中没有任何内容将高度限制为100％，因此.cont div将扩展到.table

的边界之外

只需添加max-heigh:100%即可将其限制为父级（.cell）高度的100％。然后overflow:auto（已经存在）应该完成剩下的工作

http://jsfiddle.net/0q78gbvh/1/

编辑：这不适用于所有浏览器，因为您无法直接在这些浏览器中设置display：table的max-height。

Answer 4

实现相同效果的替代方法是使用display: flex代替display: table

.flex {
    position:absolute;
    left:32px; right:32px; top:32px; bottom:32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:yellow;
}
.item {
    max-height: 100%;
    box-sizing: border-box;
    width: 264px;
    padding: 0px 12px;
    background: #ddd;
	border: 1px solid #000;
    overflow:auto;
}

<div class="flex">
    <div class="item">
        <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>

适用于Chrome（v39），Firefox（v36）和IE11。但是，一旦添加了滚动条，IE11似乎似乎没有重新生成item div，即使它有空间。

Answer 5

这是你在找什么？

由于你在ur jsFiddle Eg中有一个<p>元素，所以设置容器的最大高度等于 .margin

.cont {
width: 240px;
padding: 0px 12px;
background: #ddd;
display: inline-block;
text-align: left;
border: 1px solid #000;
max-height:300px; /* Fixed max-height of container... */
overflow-y:scroll;
}

JSFiddle Example

垂直滚动垂直居中的div与动态高度

5 个答案: