html - 为什么 display:table-cell 在没有 display:table 的情况下不能居中内容？

Question

我正在寻找最有效（或优雅）的方式来垂直和水平地居中可变高度的内容。我想出了这个：http ://cssdeck.com/t/2veysdkg/16 ，它使用 css 表格将主要内容垂直居中。

我对编写这段特定代码的要求是：

必须能够垂直和水平居中可变和固定宽度的内容
居中的内容必须在正常的文档流中（所以没有重叠）
粘性页脚和普通页眉，均为 100% 宽度
尽可能少的 hack、丑陋的代码或非语义 html
我不关心对 IE6、IE7 的支持（我将为它们使用不同的样式表）

display:table-row奇怪的是，只有当 header 和 footer 设置为， body-tag设置为时，才满足上述要求display:table。这很奇怪，因为据我了解，当缺少父表元素时，css 会生成匿名表元素。所以display:table-cell应该在没有所有周围元素的情况下工作，但我无法让它工作。

如果由我决定，我宁愿不要弄乱 body 标签的显示模式，并将页眉和页脚保留在display:block. 但我无法让它发挥作用。有谁知道为什么这不起作用，以及如何在不使用display:tableand的情况下满足上述要求display:table-row？

对于那些不想访问 cssdeck 来查看我的源代码的人，我会在这里发布：

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vertical Centering</title>
    </head>
    <body>
        <div id="header">header</div>
        <div id="vertical">
            <div id="horizontal">content</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: table;
}

#header {
    display: table-row;
    height: 2em;
    background: gray;
}

#vertical {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#horizontal {
    height: 500px;
    width: 500px;
    margin: auto;
    background: gray;
}

#footer {
    height: 2em;
    display: table-row;
    width: 100%;
    background: gray;
}

score 6 · Accepted Answer

显示属性如何工作？

display 属性允许您指定一系列与表格相关的值，以使元素显示为好像它们是表格元素一样。可用的显示值有：

table使元素表现得像一个表格元素
table-row使元素表现得像表格行 (tr) 元素
table-cell使元素表现得像表格单元 (td) 元素
table-row-group使元素表现得像表体行组 (tbody) 元素
table-header-group使元素的行为类似于表头行组（thead）元素
table-footer-group使元素的行为类似于表格页脚行组 (tfoot) 元素
table-caption使元素表现得像表格标题元素
table-column使元素表现得像表格列 (col) 元素
table-column-group使元素的行为类似于表列组 (colgroup) 元素

在此处查看完整列表... http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

但你的问题可以这样解决

检查工作小提琴http://jsfiddle.net/jZJXf/1/

CSS应该是这样的。

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: table;
}


#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto 0% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
    display: table;

}

score 5 · Accepted Answer

实际上，浏览器正在按照您的预期插入一个匿名表格元素。但是，此元素的存在只是为了使表语义起作用。CSS 中没有任何方法可以针对这个匿名块来为其提供 100% 的宽度和高度，这是您的布局所需要的。

如果你想改变它的表现形式，你需要在你的 HTML 中使用一个实际的元素来充当“表格”对象。

score 0 · Accepted Answer

这对我有用（CSS）：

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
}

#header {
    height: 2em;
    background: gray;
}

#vertical {
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 500px;
}

#horizontal {
    height: 300px;
    width: 300px;
    margin: auto;
    background: gray;
}

score 0 · Accepted Answer

你的问题是布局。您需要一个显示表格的开放 div。然后在里面你下一个显示表格行的div。在里面你旁边是你的表格单元格。

<div id="testTable">
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
 </div>

那应该是你的div的布局。

CSS如下。

#testTable {
display: table;
}
#testRow {
display: table-row;
}
#testCell {
display: table-cell;
}

自然地，你会将你想要的内容添加到 div 中，并将额外的格式添加到 CSS 中。不过，这个大纲应该有助于作为指导。如果您需要视觉参考，请查看此站点。http://www.quirksmode.org/css/display.html

score 0 · Accepted Answer

在我看来，问题是你的 div 上的 % 高度/宽度。好吧，不一定是问题，而是您没有得到预期结果的原因。

与 html 表格非常相似，“display: table-cell”元素需要包含在表格和表格行中。

如果没有找到，将创建一个匿名表和表行（它在您的代码中）。现在，问题是匿名表将被设置为自动收缩内容。

此外，如果内容难以理解，任何设置内容大小的尝试都会被忽略。您确实在内容上给出了高度/宽度，但是，您现在告诉您的表格单元格占用100% 的匿名表格，这对浏览器没有任何意义。

基本上，您需要表格的原因是帮助浏览器智能地确定区域的尺寸。不过，您不必将其设置在身体上。

score 0 · Accepted Answer

尝试使用此 css 使用您的 html，我不确定 10% 的顶部、底部边距，但它适用于 con css 甲板。

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
}

score 0 · Accepted Answer

我自己想出了一些东西（满足设计/代码要求，并且只增加了一点额外的复杂性/无语义的 html）。

Pro：不需要在 display:table 上设置 body 标签，在 display:table-row 上设置页眉/页脚。
缺点：需要一个额外的（非语义的）div 用于 display:table 标签。

在这里查看：http: //cssdeck.com/t/2veysdkg/51。

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vertical Centering</title>
    </head>
    <body>
        <div id="header">header</div>
        <div id="table">
            <div id="tablecell">
                <div id="content">content</div>
            </div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#header {
    height: 2em;
    background: gray;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    margin-top: -2em;
    margin-bottom: -2em;
}

#tablecell {
    display: table-cell;
    vertical-align: middle;
}

#content {
    height: 500px;
    width: 500px;
    margin: 2em auto 2em;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
}

html - 为什么 display:table-cell 在没有 display:table 的情况下不能居中内容？

7 回答 7

Related

Reference