将table-cell类型div放入table-column后消失，移出则恢复的问题求助

为什么table-cell放入table-column后会消失 #

display: table-column 是用来定义表格列样式规则的抽象元素，它本身不会生成可见的容器盒子——浏览器只会读取它的样式来应用到对应列，不会渲染它的子元素，所以你放在里面的table-cell会被直接忽略，自然无法显示。

正确的表格布局实现 #

如果想用表格布局实现居中，必须遵循标准的表格结构层级：table > table-row > table-cell。table-column仅用于定义列属性（比如宽度），不能作为table-cell的容器。

修改后的代码示例：

<!DOCTYPE html>
<html>
<style>
  .guess{
    width:100px;
    height:100px;
    background-color: black;
    display: table-cell;
    /* 单元格内部内容居中（按需添加） */
    text-align: center;
    vertical-align: middle;
  }
  .guesses{
    display: table;
    /* 让表格在页面水平居中 */
    margin: 0 auto;
  }
  .guessrow{
    display: table-row;
  }
  /* 用table-column定义列宽，放在table内但不包含子元素 */
  .guesscolumn{
    display: table-column;
    width: 100px;
  }
</style>
  <div class="guesses">
    <div class="guesscolumn"></div>
    <div class="guessrow">
      <div class="guess" id="guessbox1:1"></div>
    </div>
  </div>
</html>

更简洁的居中方案 #

如果只是需要让黑色方块居中，没必要用表格布局，flex布局更直观高效：

<!DOCTYPE html>
<html>
<style>
  .guesses{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 让容器占满视口高度，实现页面垂直居中 */
  }
  .guess{
    width:100px;
    height:100px;
    background-color: black;
  }
</style>
  <div class="guesses">
    <div class="guess" id="guessbox1:1"></div>
  </div>
</html>

内容的提问来源于stack exchange，提问作者Ethan Flanders