无法在 HTML 和 CSS 中的 div 中居中 table - 响应式网站

Question

我正在尝试将 HTML table 置于 CSS 的中心，但代码无法正常工作。我已经尝试过证明内容、对齐内容、边距等，但似乎没有任何效果。该网站需要响应，因此所有值都需要是百分比（这使得它有点难）。此外，出于某种原因，某些列的宽度与最后一列不同？也不确定。我会把代码放在下面。

.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>

Answer 1

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

.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>

Answer 2

嗨，如果你想使用 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;
}

Answer 3

只需在您的 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; */
}

无法在 HTML 和 CSS 中的 div 中居中 table - 响应式网站

Can't centre a table within a div in HTML and CSS - responsive website

html

css

center

centering