Question

简单代码

<table class="box" border="1px">
  <tr>
    <td valign="top">
      my content
    </td>
  </tr>
</table>

和风格

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:absolute;
    margin-left:-150px;
    /* half of width */
    margin-top:-150px;
    /* half of height */
    top:50%;
    left:50%;
}

（参见 this fiddle ）

允许水平和垂直居中。但是，当窗口调整为小于表格时，即使显示滚动条，我也无法看到内容的顶部。为什么呢？

Answer 1

为文档指定最小高度：

html{
  position:relative;
  height: 100%;
  min-height: 300px;
}

这样，窗口的高度永远不会小于盒子。

（需要height:100%，因此您的框会居中）

...即使显示滚动条，

你看到滚动条，因为内容溢出，但html的高度不包括那个额外的空间（当应用负边距时，它没有考虑到额外的高度）

Answer 2

.box {
    width:50%;
    height:50%;
    background-color:#d9d9d9;
    position:absolute;
    margin-left:-150px;
    /* half of width */
    margin-top:-150px;
    /* half of height */
    top:50%;
    left:50%;
}

.top {

    margin-left:2cm;
    margin-right:2cm;
    vertical-align:text-top;
}


html

<table class="box" border="1px">
  <tr>
    <td class="top">my content</td>
  </tr>

Answer 3

.box {
    width:50%;
    height:50%;
    background-color:#d9d9d9;
    position:absolute;
    top:25%;
    left:25%;
}

调整水平和垂直居中的表格的问题

3 个答案: