1

我的模板中有三行主 div。我有一个页眉、一个内容包装器和一个页脚。页眉紧贴顶部，页脚紧贴底部。我在两者之间有一个内容包装器 div。我基本上想在两个 div 中垂直居中内容包装器。内容 div 将始终是动态高度，因此 line-height 方法对我不起作用。对我来说最好的方法是什么？

4

3 回答 3

2

垂直居中内容

在不使用 JavaScript 的情况下，垂直居中动态内容的方法数量有限：

  1. HTML 表格
  2. CSS 表格
  3. CSS3 弹性盒
  4. CSS3 网格

在这种情况下，现代方法是使用 CSS 表格，相当于 HTML 表格。但如果需要支持 IE7 或更早版本，则改用 HTML 表格。Flexbox 不适合这种特殊情况，并且它不受 IE9 和更早版本的支持。CSS网格目前只有IE10支持，标准还没有最终确定。

CSS表格的基本用法是：

HTML

<div class="table">
    <div class="row">
        <div class="cell">Content</div>
    </div>
</div>

CSS

.table {display: table;}
.row   {display: table-row;}
.cell  {display: table-cell;}

演示   （测试于：IE8/9/10、FF、Chrome、Safari、Opera）

在 HTML 表格和 CSS 表格之间进行选择

对于表格数据（例如，数据网格），倾向于使用HTML 表格。在这种情况下，它在语义上更正确，并且可以更容易地理解源代码的性质，这可能有助于可访问性和 SEO（以及代码的可维护性）。

对于非表格数据（例如，一般布局），倾向于使用CSS 表格（如果浮动和 CSS 定位不充分）。它在语义上更正确，因为使用 HTML 表格会产生对表格数据的期望，并且它可能不会让屏幕阅读器和搜索引擎感到困惑。布局的具体用途包括垂直居中的内容和等高的列。

CSS 表格相对于 HTML 表格的一个特别优势是支持visibility:collapse，它允许行或列折叠（HTML 表格无法做到这一点）。如果需要表格数据的特定功能，请使用 CSS 表格。

于 2013-03-04T17:05:30.137 回答
0

您可以使用以下代码执行此操作：-

<div> using display:table-cell; vertical-align:middle
于 2013-03-04T06:09:09.193 回答
0

节省一些痛苦，只需将它们分成三个单独的容器。

#header {
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#content{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#footer{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}

<div id="header">test</div>
<div id="content">test</div>
<div id="footer">test</div>

溢出隐藏属性将使 div 自动展开以显示添加到其中的任何其他内容.. 使其行为更像一个表格单元格。

这是一个示例在此处输入链接描述

于 2013-03-04T14:10:28.810 回答