Why is a ‘s text-align:center style property ignored once I use JavaScript to change the contents of an inner- ?

I have this html table (I use single-cells tables instead of any other tags so that vertical-align works) :

<table cellspacing=0 cellpadding=0 class='BloodyButtonTanText' id='CameraModeTable' style='display:none; position:absolute; z-index:2; left:30%;
top:20%; width:40%; height:6.25%; font-size:5vmin; opacity:0'>
<tr><td style='width:100%; height:100%; text-align:center; vertical-align:middle; cursor:default'>
    <span id='CameraModeHolder'></span>&nbsp;Mode Activated...
</td></tr></table>

the following JavaScript functions activated upon right-clicking anywhere in the document :

function ToggleCameraTarget () {
    if (!CameraTarget) {
    RecordAction('Entered%20Cam%20Controls%20Mode');
    CameraTarget = 'SceneHolder';
    document.body.style.cursor = 'grab';
    document.body.title = `Mouse left/right to rotate around the 
`;
    DisplayCurrentCameraMode('Camera');
    } else {
    LastMouseX = false;
    LastMouseY = false;
        if (CameraTarget == 'SceneHolder') {
        RecordAction('Entered%20BuzzSaw%20Angle%20Control%20Mode');
        CameraTarget = 'BuzzSaw';
        document.body.title = `Mouse left/right to rotate around the 
`;
        DisplayCurrentCameraMode('BuzzSaw Angle');
        } else {
        RecordAction('Cancelled%20Angle%20Control%20Modes');
        CameraTarget = false;
        document.body.style.cursor = 'auto';
        document.body.title = `Right-click the document to enter Camera Mode`;
        DisplayCurrentCameraMode('Static');
        }
    } 
}


            // Displays the current Camera Mode (upon right-clicking the document)
        function DisplayCurrentCameraMode (CameraModeLabel) {
        document.getElementById('CameraModeHolder').innerHTML = CameraModeLabel;
            if (CameraModeLabel == 'Static') {
            document.getElementById('CameraModeTable').className = 'TanButtonBloodyText';
            } else {
            document.getElementById('CameraModeTable').className = 'BloodyButtonTanText';
            }
        FadeIn(document.getElementById('CameraModeTable'),12.5,0.1);
            var CameraModeDisplayTimeout = setTimeout(function () {
            FadeOut(document.getElementById('CameraModeTable'),12.5,0.1);
            },750);
        }

If I remove display:none and opacity:0 from the table’s style, i see ‘ Mode activated…’ which is neatly centered in the cell. As soon as I right click the document though, the box fades in with non-centered text. I’ve tried adding a <center> before the <span> in the <td>, but it didn’t solve the problem…

What super-duper-remote-nerdy rule am I forgetting about here? 🙂