Question

我有一个包含表格单元格的表格。在那些表格单元格中，我想显示一个绝对定位的div。 div有一个固定的顶部和底部，我希望它显示在表格单元格的中心。到目前为止，这是我的代码：

table {
  width: 100%;
  border: 1px solid;
  height: 200px;
  table-layout: fixed;
}
table td {
  position: relative;
  border: 1px solid
}
div {
  position: absolute;
  top: 20%;
  bottom: 30%;
  border: 1px solid;
  box-sizing: border-box;
  padding: 5px;
  width: 90%;
  margin: auto;
}

<html>
<table>
  <tr>
    <td>
      <div>Content</div>
    </td>
    <td>&nbsp;</td>
</table>

</html>

我将保证金设置为自动，希望它会使div居中，但事实并非如此。由于页面外观的其他要求，我必须在其中包含表格布局，我不能设置td的宽度。

有谁能告诉我我做错了什么？

Answer 1

由于您为绝对定位的元素提供了宽度，因此您只需添加left: 0; right: 0;以使其水平居中。

或者，由于元素具有基于百分比的固定宽度90%，因此您也可以使用left: 5%水平居中。

＆＃13;

table {
  width: 100%;
  border: 1px solid;
  height: 200px;
  table-layout: fixed;
}
table td {
  position: relative;
  border: 1px solid
}
div {
  position: absolute;
  top: 20%;
  bottom: 30%;
  left: 0; right: 0;
  border: 1px solid;
  box-sizing: border-box;
  padding: 5px;
  width: 90%;
  margin: auto;
}

＆＃13;

<html>
<table>
  <tr>
    <td>
      <div>Content</div>
    </td>
    <td>&nbsp;</td>
</table>

</html>

＆＃13;

在相对表格单元格中水平居中绝对div

1 个答案: