Question

我在显示表格方面有点困难。我经常使用display:table和display:table-cell。特别是当我只想垂直居中一个部分的内容时。所以说，我有以下HTML：

<div class="wrapper">
  <div class="cell">
    <div class="red">

    </div>
  </div>
</div>

以及以下css应用于html：

html,body {
  height: 100%;
}
.wrapper {
  display: table;
  width: 100%;
  height: 100%;
}
.wrapper * {
  width: 100%;
  height: 100%;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}
.red {
  margin-right: auto;
  margin-left: auto;
  background: red;
  height: 200px;
  width: 200px;
}

现在有一个小问题。我想在此特定部分添加一个部分标题，部分标题必须是.wrapper的子标题，因此HTML更改如下：

<div class="wrapper">

  <div class="section-heading">
    <h1>section heading</h1>
  </div>

  <div class="cell">
    <div class="red">

    </div>
  </div>

</div>

现在使用display table和table-cell的问题是，当我向该部分添加标题时，我无法添加它而不会影响.wrapper的其他子元素。那么如何添加标题（当在上面的HTML中添加标题时，.cell div似乎在略微水平移动？）

当然我可以使用绝对定位，但我只是想知道，是否可以做一些事情，而不将标题元素从流程中取出？

FIDDLE HERE

Answer 1

您可以制作标题容器display: table-row：

.section-heading {
    display: table-row;
    text-align: center;
}

查看演示：

＆＃13;

html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
.wrapper * {
    width: 100%;
    height: 100%;
}
.cell {
    display: table-cell;
    vertical-align: middle;
}
.red {
    margin-right: auto;
    margin-left: auto;
    background: red;
    height: 200px;
    width: 200px;
}

.section-heading {
    display: table-row;
    text-align: center;
}

＆＃13;

<div class="wrapper">
    <div class="section-heading">
        <h1>section heading</h1>
    </div>
    <div class="cell">
        <div class="red"></div>
    </div>
</div>

＆＃13;

Answer 2

您是否尝试将display：table-row添加到section-heading？

.wrapper > .section-heading{
    display:table-row;
    height:auto;
}

小提琴：http://jsfiddle.net/7xo353hg/4/

向使用display：table和display：section-cell

2 个答案: