求助：CSS结合JS实现卡片及内部文字居中无效问题

问题根源分析 #

• 卡片无法居中：#test 使用了 position: absolute 并固定 top:10px 和 left:10px，导致元素脱离文档流，父元素的居中设置无法对其生效。
• 文字无法居中：CSS 中的 align: center 不是有效属性，应使用 text-align: center；同时现代浏览器分支（document.getElementById）的代码直接插入文本，未设置居中样式。

修正方案及代码调整 #

1. 修正 CSS 代码

.testclass {
    font: 10px courier, courier new;
    background: #ffffff;
    z-index: 10;
    layer-background-color: #ffffff;
    text-align: center; /* 添加文字居中样式 */
}

#test {
    /* 移除绝对定位及固定位置，改为块级元素自动居中 */
    margin: 0 auto;
    padding: 0px;
    width: fit-content; /* 让宽度适配内容，也可设置固定宽度 */
}

#rel {
    position: relative;
    text-align: center; /* 替换无效的 align:center */
}

2. 简化 HTML 结构

原表格嵌套可简化，确保卡片容器提供足够居中空间：

<body bgcolor="gainsboro" onload="startup();">
    <table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" valign="middle"> <!-- 添加垂直居中 -->
                <div class="testclass" id="test"></div>
            </td>
        </tr>
    </table>
    <center>
        <form>
            <p>
                <input type="button" onclick="doBack(); return false" value="Back">
                <input type="button" onclick="doNext(); return false" value="Next">
            </p>
        </form>
    </center>
</body>

3. 优化 JS 函数（适配现代浏览器）

移除古董浏览器兼容代码，简化逻辑：

function writit(text, id) {
    const element = document.getElementById(id);
    if (element) {
        element.innerHTML = text;
    }
}

// 若仍需使用行数、行宽计算，保留 getNumLines、getWidestLine 函数即可

关键说明 #

• 若需绝对定位元素居中，可设置 left:50% + transform: translateX(-50%)，但此场景无需绝对定位，用 margin:auto 更简洁。
• text-align:center 会让块级元素内的文本、行内元素自动居中，完全匹配需求。
• document.layers 是针对 Netscape 4 的兼容代码，现代浏览器已无需支持，移除后可大幅简化代码逻辑。

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