Question

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

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

必须能够纵向和横向居中变量和固定宽度内容
居中内容必须位于正常文档流程内（因此不能重叠）
粘性页脚和普通标题，均为100％宽度
尽可能少的黑客，丑陋的代码或非语义的HTML
我不关心对IE6，IE7的支持（我会为它们使用不同的样式表）

奇怪的是，只有当页眉和页脚设置为display:table-row且body标记设置为display:table时，才会满足上述要求。这很奇怪，因为据我所知，当缺少父表元素时，css将生成匿名表元素。所以display:table-cell应该在没有所有周围元素的情况下工作，但是我无法使其工作。

如果由我决定，我宁愿不要弄乱身体标签的显示模式，并将页眉和页脚留在display:block上。但我无法让它发挥作用。有没有人理解为什么这不起作用，以及如何在不使用display:table和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;
}

Answer 1

展示广告属性如何运作？

display属性允许您指定一系列与表相关的值，以便使元素显示为表元素。可用的显示值为：

table使元素的行为类似于表元素
table-row使元素的行为类似于表行（tr）元素
table-cell使元素的行为类似于表格单元格（td）元素
table-row-group使元素的行为类似于表体行组（tbody）元素
table-header-group使元素的行为类似于表头行 group（thead）元素
table-footer-group使元素的行为类似于表格页脚行 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;

}

Answer 2

实际上，浏览器是按预期插入匿名表元素。但是，此元素仅用于使表语义工作。在CSS中没有任何方法可以定位此匿名块，使其具有100％的宽度和高度，这是布局所需的。

如果要更改其演示文稿，则需要HTML中的实际元素充当“表格”对象。

Answer 3

这项工作对我来说（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;
}

Answer 4

你的问题是布局。你需要一个显示表格的开场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

Answer 5

在我看来，问题是你的div的％高度/宽度。好吧，不一定是问题，但是你没有得到预期的结果。

就像html表一样，“display：table-cell”元素需要包含在表和表行中。

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

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

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

Answer 6

尝试使用这个css的html，我不确定10％的顶部，底部边距，但是它的工作时间很复杂。

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;
}

Answer 7

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

Pro：不需要在显示屏上设置body标签：table，以及显示的页眉/页脚：table-row。
Con：需要显示的额外（非语义）div：table tag。

请在此处查看：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;
}

为什么显示：table-cell不是没有display：table的中心内容？

7 个答案: