如何设置 CSS 表格的最大高度？

Question

我正在尝试使用本文中概述的方法将 div 中的文本垂直居中：http://css-tricks.com/vertically-center-multi-lined-text/

.container {
    width: 160px;
    margin: 80px auto;
    padding: 5px;
    height: 60px;
    max-height: 60px;
    border: 1px solid black;
    display: table;
}

.container p {
    height: 60px;
    max-height: 60px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>

<div class="container">
<p>Here's one line.</p>
</div>

JSFiddle 在这里：http://jsfiddle.net/Vc88w/2/

div 不能超过指定的 60px 高度，并且任何溢出的文本都应该被隐藏。当没有足够的文本使 div 溢出时，CSS 表格技巧可以正常工作，但是当文本过多时，它会迫使 div 大于 60px（第一个示例），这不是我想要的。

除了 height 和 max-height 之外，是否还有一个 CSS 规则可以让我覆盖 CSS 表格的高度？或者，在容器 div 的最大高度为 60px 的同时，我还能如何实现垂直居中？

Answer 1

是的，您必须在“.container”中将“display:table”更改为“display:block”

.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}