javascript - 垂直对齐不起作用 CSS/HTML

Question

我正在尝试垂直对齐我的页面，但我无法让它工作。 我尝试过其他问题的其他解决方案，但到目前为止，没有一个对我有用，有人知道为什么吗？

这是我想要垂直对齐的 HTML 代码:

    header {
      margin: 0 auto;
      width: 600px;
      margin-bottom: 3em;
      margin-top: 3em;
      text-align: center;
    }
    section {
      width: 600px;
      margin: 0 auto;
      padding: 3px;
      background-color: white;
    }
    #textbox {
      color: #075488;
      border: solid 3px #075488;
    }
    #textbox div {
      font-weight: bold;
      border-bottom: 2px solid #075488;
      margin-left: 3em;
      margin-right: 3em;
      padding-left: 2em;
      padding-right: 2em;
      padding-top: 1.5em;
      padding-bottom: 1em;
      margin-bottom: 1em;
      text-align: center;
    }
    #textbox table {
      font-weight: normal;
      width: 100%;
      padding-right: 5em;
      padding-left: 4em;
      padding-bottom: 1em;
      margin: 0 auto;
      line-height: 1;
    }
    td:nth-child(3) {
      width: 100px;
    }
    td:nth-child(2) {
      text-align: center;
    }
    section p {
      color: white;
      font-size: 12px;
      float: right;
    }

<header id="header">
  <img src="images/image.png">
</header>
<section id="section">
  <div id="textbox">
    <div>test</div>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</section>

有人知道这个问题的解决办法吗？

谢谢你!

如果 CSS 不可行，是否可以使用 jQuery/Javascript 代替，如果可以，我该怎么做？

Answer 1

您可以在body上设置position:absolute，并通过以下方式居中:

body {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari */
  transform: translate(-50%, -50%);         /* Other browsers */
}

(记得删除标题上的上边距)

body {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
header {
  margin: 0 auto;
  width: 600px;
  margin-bottom: 3em;
  text-align: center;
}
section {
  width: 600px;
  margin: 0 auto;
  padding: 3px;
  background-color: white;
}
#textbox {
  color: #075488;
  border: solid 3px #075488;
}
#textbox div {
  font-weight: bold;
  border-bottom: 2px solid #075488;
  margin-left: 3em;
  margin-right: 3em;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1.5em;
  padding-bottom: 1em;
  margin-bottom: 1em;
  text-align: center;
}
#textbox table {
  font-weight: normal;
  width: 100%;
  padding-right: 5em;
  padding-left: 4em;
  padding-bottom: 1em;
  margin: 0 auto;
  line-height: 1;
}
td:nth-child(3) {
  width: 100px;
}
td:nth-child(2) {
  text-align: center;
}
section p {
  color: white;
  font-size: 12px;
  float: right;
}

<header id="header">
  <img src="http://placehold.it/600x50">
</header>
<section id="section">
  <div id="textbox">
    <div>test</div>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</section>