无法将基于网格的表格居中显示在屏幕上

Question

我使用div和格式化为flex网格的文本创建了一个简单的学分表。但是，我正在尝试将其设置为使蓝色分隔条始终在视口中水平居中(对于所有视图大小(。然而，当我调整屏幕的宽度时，我可以看出桌子有点偏离，并且没有保持居中。

我创建了一个简单的CodePen来说明这个问题：

https://codepen.io/Jdo300/pen/xxWarYL

.credits_container {
position: relative;
width: 100%;
font-size: 22px;
line-height: 1.5em;
}
.credits_row {
display: grid;
grid-auto-flow: column;
grid-template-columns: 47% 0fr;
grid-column-gap: 1.6rem;
min-height: 2.5rem;
}
.credits_left {
display: block;
white-space: pre-wrap;
word-break: break-word;
text-align: end;
}
.credits_divider {
position: relative;
display: inline-block;
width: 0.2rem;
height: 100%;
background-color: #087f9b;
}
.credits_right {
display: block;
white-space: pre-wrap;
word-break: break-word;
text-align: start;
}
.block {
width: 20px;
height: 20px;
background: blue;
}

<center>
<div class="credits_container">
<div class="credits_row">
<div class="credits_left"><b>Lead writer</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Rodger Green</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Editors</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Lenny Samoah</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Michelle Johnson</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Web design</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Jonathan Doe</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Sean Chen</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Rachael Boe</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Web development</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Jimmy Lee</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Paul Miller</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Data visuals</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Chase Lim</div>
</div>
</div>
<div class="block"></div>
</center>

我在底部放了一个蓝色的盒子，显示中心应该在哪里，这样你就可以更好地看到发生了什么。我仍在思考如何使用柔性网格，所以我确信我只是缺少了一些基本的东西。

Answer 1

不要使用<center>；它在HTML4中已被弃用，并且可能随时停止工作。与其试着把东西做成100%的宽度，把东西放在里面居中，不如使用自动边距让浏览器弄清楚。

同时，针对这类材料制作了fr网格单元。在这里，我将列设置为在0.2rem列的任一侧使用1fr。浏览器将计算出fr的宽度，以适应所有内容。

.credits_container {
position: relative;
margin: 0 auto;
font-size: 22px;
line-height: 1.5em;
}
.credits_row {
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 0.2rem 1fr;
grid-column-gap: 1.6rem;
min-height: 2.5rem;
}
.credits_left {
display: block;
white-space: pre-wrap;
word-break: break-word;
text-align: end;
}
.credits_divider {
position: relative;
display: inline-block;
width: 0.2rem;
height: 100%;
background-color: #087f9b;
}
.credits_right {
display: block;
white-space: pre-wrap;
word-break: break-word;
text-align: start;
}
.block {
width: 20px;
height: 20px;
background: blue;
margin: 0 auto;
}

<div class="credits_container">
<div class="credits_row">
<div class="credits_left"><b>Lead writer</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Rodger Green</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Editors</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Lenny Samoah</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Michelle Johnson</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Web design</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Jonathan Doe</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Sean Chen</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Rachael Boe</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Web development</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Jimmy Lee</div>
</div>
<div class="credits_row">
<div class="credits_left"></div>
<div class="credits_divider"></div>
<div class="credits_right">Paul Miller</div>
</div>
<div class="credits_row">
<div class="credits_left"><b>Data visuals</b></div>
<div class="credits_divider"></div>
<div class="credits_right">Chase Lim</div>
</div>
</div>
<div class="block"></div>

Answer 2

您是否尝试更改网格模板列的百分比：47%0fr？我试过48.5%，看起来很集中。