如何使表格行中的文本居中，使其始终位于屏幕可见区域的中心答案

【问题标题】：How to center text in a table row, so it was always at the center of the visible area of the screen如何使表格行中的文本居中，使其始终位于屏幕可见区域的中心
【发布时间】：2017-07-27 12:50:39
【问题描述】：

请有人可以帮助我完成这项任务。我想将表格行中的文本居中（“这里有一些文本......”），以便它始终位于屏幕可见区域的中间。表格将水平滚动。

.compare-content {
  max-width: 480px;
  overflow-x: auto;
}
.compare-content table {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.compare-content table caption {
  font-size: 14px;
  line-height: 39px;
  border-top: 1px solid #CECECE;
  border-bottom: 1px solid #CECECE;
}
.compare-content table tr {
  line-height: 25px;
}
.compare-content table td {
  padding: 0 10px;
  min-width: 145px;
}
.compare-content tr:nth-child(odd) {
  background-color: #F4F4F4;
  color: #898989;
}

<div class="compare-content">
  <table class="total">
    <caption>Summary</caption>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
    </tr>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text4</td>
      <td>text5</td>
      <td>text6</td>
    </tr>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text7</td>
      <td>text8</td>
      <td>text9</td>
    </tr>
    <tr>
      <td colspan="100%">Some text here...</td>
    </tr>
    <tr>
      <td></td>
      <td>text10</td>
      <td>text11</td>
      <td>text12</td>
    </tr>
  </table>
  <div>

【问题讨论】：

标签： jquery html css html-table row

【解决方案1】：

所以我可以建议你的例子，我为你准备小提琴 - https://jsfiddle.net/skyr9999/vuxzfvnu/

只要你的表格没有垂直滚动，它就可以工作，但如果你不这样做，一切都很好：

这是 CSS 和 HTML：

.compare-content {
  max-width: 480px;
  overflow-x: auto;
}
.compare-content table {
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.compare-content table caption {
  font-size: 14px;
  line-height: 39px;
  border-top: 1px solid #CECECE;
  border-bottom: 1px solid #CECECE;
}
.compare-content table tr {
  line-height: 25px;
}
.compare-content table td {
  padding: 0 10px;
  min-width: 145px;
}
.compare-content tr:nth-child(odd) {
  background-color: #F4F4F4;
  color: #898989;
}

.total tr td
{
  border : 0px #000 solid;
}

.fix {
  position: absolute;
  width: 455px;
  left: 10px;
  border : 0px #000 solid;
}

<div class="compare-content">
  <table class="total">
    <caption>Summary</caption>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 1.</td>
    </tr>
    <tr>
      <td></td>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
    </tr>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 2.</td>
    </tr>
    <tr>
      <td></td>
      <td>text4</td>
      <td>text5</td>
      <td>text6</td>
    </tr>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 3.</td>
    </tr>
    <tr>
      <td></td>
      <td>text7</td>
      <td>text8</td>
      <td>text9</td>
    </tr>
    <tr>
      <td colspan="100%">&nbsp;</td>
      <td colspan="100%" class="fix">Some text here.. 4.</td>
    </tr>
    <tr>
      <td></td>
      <td>text10</td>
      <td>text11</td>
      <td>text12</td>
    </tr>
  </table>
  <div>

【讨论】：

感谢您的解决方案，但是在原来的情况下，这个表格很大并且有垂直滚动。为移动屏幕制作的布局。需要其他解决方案。
我再次检查了您使用 position: absolute; 的选项有用！！非常感谢您的帮助。谢谢！
@Vasilij Altunin 当我复制/粘贴您提供的绝对定位代码时，它不像在代码 sn-p 中那样工作。即使在您提供的小提琴中-我将 fixed 更改为 absolute ，它仍然无法正常工作。