无法在 HTML 和 CSS 中的 div 中居中表格 - 响应式网站答案

【问题标题】：Can't centre a table within a div in HTML and CSS - responsive website无法在 HTML 和 CSS 中的 div 中居中表格 - 响应式网站
【发布时间】：2021-08-01 13:23:39
【问题描述】：

我试图在 CSS 中将 HTML 表格居中，但代码不起作用。我尝试过 justify-content、align-content、margin 等，但似乎没有任何效果。该网站需要响应，因此所有值都必须是百分比（这使得它有点难）。此外，由于某种原因，某些列的宽度与最后一列不同？？也不确定。我将代码放在下面。

.numberButton {
  background-color: #707070;
  width: 100%;
  height: 35%;
  text-align: center;
}

.tdNumber {
  width: 30%;
  height: 40%;
}

#numberTable {
  align-content: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  width: 90%;
}

#numberBackground {
  background-color: #3968CB;
  margin: 0px;
  width: auto;
  height: 400%;
  justify-content: center;
}

<body id="numberBackground">
  <div id="numberTable">
    <table>
      <tbody>
        <tr>
          <td class="tdNumber"><button id="one" class="numberButton">1</button></td>
          <td class="tdNumber"><button id="two" class="numberButton">2</button></td>
          <td class="tdNumber"><button id="three" class="numberButton">3</button></td>
          <td class="tdNumber"><button id="four" class="numberButton">4</button></td>
        </tr>
        <tr>
          <td class="tdNumber"><button id="five" class="numberButton">5</button></td>
          <td class="tdNumber"><button id="six" class="numberButton">6</button></td>
          <td class="tdNumber"><button id="seven" class="numberButton">7</button></td>
          <td class="tdNumber"><button id="eight" class="numberButton">8</button></td>
        </tr>
        <tr>
          <td class="tdNumber"><button id="nine" class="numberButton">9</button></td>
          <td class="tdNumber"><button id="ten" class="numberButton">10</button></td>
          <td class="tdNumber"><button id="eleven" class="numberButton">11</button></td>
          <td class="tdNumber"><button id="twelve" class="numberButton">12</button></td>
        </tr>
        <tr>
          <td class="tdNumber"><button id="thirteen" class="numberButton">13</button></td>
          <td class="tdNumber"><button id="fourteen" class="numberButton">14</button></td>
          <td class="tdNumber"><button id="fifteen" class="numberButton">15</button></td>
          <td class="tdNumber"><button id="sixteen" class="numberButton">16</button></td>
        </tr>
        <tr>
          <td class="tdNumber"><button id="seventeen" class="numberButton">17</button></td>
          <td class="tdNumber"><button id="eighteen" class="numberButton">18</button></td>
          <td class="tdNumber"><button id="nineteen" class="numberButton">19</button></td>
          <td class="tdNumber"><button id="twenty" class="numberButton">20</button></td>
        </tr>
        <tr>
          <td><button onclick="location.href='Topics Page.html'" type="button" id="backanimal" class="numberButton">BACK</button></td>
          <td><button onclick="location.href='Numbers_Test.html'" type="button" id="testanimal" class="numberButton">TEST</button></td>
        </tr>
      </tbody>
    </table>
  </div>

【问题讨论】：

如果你将 'display: flex;' 添加到 #numberTable css 它应该与 justify-content: center; 一起工作

标签： html css center centering

【解决方案1】：

嗨，如果你想使用 align-items: center; 和 justify-content: center; 首先必须使用 display: flex 和 . ..，我修复了你的代码，但你必须更多地组织它。

#numberTable {
display: flex;
align-items: center; 
justify-content: center;
padding: 20px;
text-align: center;
margin: 0 auto;
}

.tdNumber{
height: auto;
padding: .2rem;
}

【讨论】：

【解决方案2】：

只需在您的 numberBackground 标签中添加以下提到的 CSS 代码，您的问题就会得到解决。对于内框元素的大小，您可以使用 flex-child 属性。

#numberBackground {
background-color: #3968CB;
margin: 0px;
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* justify-content: center; */
}

【讨论】：

欢迎来到 StackOverflow！ :) 请考虑重新格式化代码并启用语法突出显示，使其更易于阅读:)

【解决方案3】：

将绝对位置添加到您的表格中。然后使用变换将其定位在中心。

.numberButton {
  background-color: #707070;
  width: 100%;
  height: 35%;
  text-align: center;
}

.tdNumber {
  width: 30%;
  height: 40%;
}

#numberTable {
  align-content: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  width: 90%;
}

table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#numberBackground {
  background-color: #3968CB;
  margin: 0px;
  width: auto;
  height: 400%;
  justify-content: center;
}

<div id="numberTable">
  <table>
    <tbody>
      <tr>
        <td class="tdNumber"><button id="one" class="numberButton">1</button></td>
        <td class="tdNumber"><button id="two" class="numberButton">2</button></td>
        <td class="tdNumber"><button id="three" class="numberButton">3</button></td>
        <td class="tdNumber"><button id="four" class="numberButton">4</button></td>
      </tr>
      <tr>
        <td class="tdNumber"><button id="five" class="numberButton">5</button></td>
        <td class="tdNumber"><button id="six" class="numberButton">6</button></td>
        <td class="tdNumber"><button id="seven" class="numberButton">7</button></td>
        <td class="tdNumber"><button id="eight" class="numberButton">8</button></td>
      </tr>
      <tr>
        <td class="tdNumber"><button id="nine" class="numberButton">9</button></td>
        <td class="tdNumber"><button id="ten" class="numberButton">10</button></td>
        <td class="tdNumber"><button id="eleven" class="numberButton">11</button></td>
        <td class="tdNumber"><button id="twelve" class="numberButton">12</button></td>
      </tr>
      <tr>
        <td class="tdNumber"><button id="thirteen" class="numberButton">13</button></td>
        <td class="tdNumber"><button id="fourteen" class="numberButton">14</button></td>
        <td class="tdNumber"><button id="fifteen" class="numberButton">15</button></td>
        <td class="tdNumber"><button id="sixteen" class="numberButton">16</button></td>
      </tr>
      <tr>
        <td class="tdNumber"><button id="seventeen" class="numberButton">17</button></td>
        <td class="tdNumber"><button id="eighteen" class="numberButton">18</button></td>
        <td class="tdNumber"><button id="nineteen" class="numberButton">19</button></td>
        <td class="tdNumber"><button id="twenty" class="numberButton">20</button></td>
      </tr>
      <tr>
        <td><button onclick="location.href='Topics Page.html'" type="button" id="backanimal" class="numberButton">BACK</button></td>
        <td><button onclick="location.href='Numbers_Test.html'" type="button" id="testanimal" class="numberButton">TEST</button></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

flex 更好
谢谢你这很好用；但是，我还需要垂直扩展行，以便表格填充大约 90% 的页面。我尝试过应用 flexbox，但没有成功（我在编码方面不是很有经验）。你也能帮忙解决这个问题吗？
你想让宽度和高度填满页面的大部分吗？
这是你想要的吗？ jsfiddle.net/hy163zj0
是的，我已经成功地完成了宽度，但高度似乎没有响应变化的测量值......我已经尝试了链接，虽然它使第一行更高以填充整个页面它没有' t 影响其他行。