如何响应式居中wpwi_inner容器内容，字体缩放时仍保持居中？

要让wpwi_inner容器的内容在字体大小变化时仍保持稳定居中，可通过以下两种方案实现：

方案一：使用Flexbox（推荐，适配响应式场景） #

Flexbox是现代布局方案，无需依赖固定宽度，能自动适配内容变化，完美解决字体缩放时的对齐问题。修改后的CSS代码如下：

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 9px; /* 可任意调整字体大小测试 */
}
.wpwi_top {
    text-align: center;
}

.wpwi_outer {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    width: 100%;
}

.wpwi_inner {
    width: 40%;
    margin: 0 auto; /* 容器自身水平居中 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* 可选，增加行间距提升可读性 */
}

.wpwi_row {
    display: flex;
    justify-content: center; /* 行内内容水平居中 */
    gap: 20px; /* 可选，调整两个单元格的间距 */
}

.wpwi_row > div {
    flex: 0 1 auto; /* 内容自适应宽度 */
    text-align: center; /* 单元格内文本居中 */
}

效果说明：无论字体放大或缩小，wpwi_row内的两个元素都会保持水平居中，容器wpwi_inner也始终在页面中间，完全适配响应式需求。

方案二：优化原有Table布局 #

如果希望保留table布局，只需调整单元格的对齐属性，去掉固定宽度限制即可：

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 9px;
}
.wpwi_top {
    text-align: center;
}

.wpwi_outer {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    width: 100%;
}

.wpwi_inner {
    display: table;
    width: 40%;
    margin: auto;
}

.wpwi_row {
    display: table-row;
}

.wpwi_row > div {
    display: table-cell;
    width: auto; /* 去掉固定宽度，让内容决定宽度 */
    text-align: center; /* 文本水平居中 */
    vertical-align: middle; /* 可选，垂直居中 */
    padding: 4px 8px; /* 可选，增加内边距提升可读性 */
}

效果说明：去掉固定宽度后，单元格会根据内容自动调整，字体变化时文本始终保持居中，容器整体也保持水平居中。

内容的提问来源于stack exchange，提问作者abu abu