标记

Question

我在html中构建了一个表格，并希望在标记中添加一些文本并将其居中。到目前为止我的代码：

＆＃13;

＆＃13;

document.getElementsByClassName("mainScreen")[0].style.display = "flex";
document.getElementById("fixation").style.display = "block";

＆＃13;

html,
body,
.mainScreen {
  width: 100%;
  height: 100%;
  text-align: center;
}

.mainScreen {
  display: flex;
}

#fixation {
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

＆＃13;

<div class="mainScreen" style="display:none">
  <table align="center">
    <tbody>
      <tr>
        <td id="fixation" style="text-align:center;">+</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

当我运行代码时，文本始终位于页面顶部而不是绝对中心。我也试图找到一种方法来使文本居中，而不管计算机屏幕大小。任何建议都非常感谢！

Answer 1

将align-items: center;添加到.mainScreen

document.getElementsByClassName("mainScreen")[0].style.display = "flex";
document.getElementById("fixation").style.display = "block";

html,
body,
.mainScreen {
  width: 100%;
  height: 100%;
  text-align: center;
}

.mainScreen {
  display: flex;
align-items: center;
}

#fixation {
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

<div class="mainScreen" style="display:none">
  <table align="center">
    <tbody>
      <tr>
        <td id="fixation" style="text-align:center;">+</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

您也可以将<table>置于中心位置：

document.getElementsByClassName("mainScreen")[0].style.display = "flex";
document.getElementById("fixation").style.display = "block";

html,
body,
.mainScreen {
  width: 100%;
  height: 100%;
  text-align: center;
}

.mainScreen {
  display: flex;
}

table, #fixation {
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

<div class="mainScreen" style="display:none">
  <table align="center">
    <tbody>
      <tr>
        <td id="fixation" style="text-align:center;">+</td>
      </tr>
    </tbody>
  </table>
</div>