​​タグの中心テキスト

Question

私はhtmlで表を作成しましたが、タグ内にテキストを追加して中央に配置したいと考えています。これまでの私のコード：

document.getElementsByClassName("mainScreen")[0].style.display = "flex"; 
 
document.getElementById("fixation").style.display = "block";

html, 
 
body, 
 
.mainScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.mainScreen { 
 
    display: flex; 
 
} 
 

 
#fixation { 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="mainScreen" style="display:none"> 
 
    <table align="center"> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fixation" style="text-align:center;">+</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

私は、コードを実行すると、テキストがページの上部にはなく、絶対的な中心に常にあります。また、コンピュータの画面サイズに関係なくテキストを中央に配置する方法を見つけることを試みています。どんなアドバイスも大歓迎です！

Answer 1

あなたにも<table>を中央にでき.mainScreen

document.getElementsByClassName("mainScreen")[0].style.display = "flex"; 
 
document.getElementById("fixation").style.display = "block";

html, 
 
body, 
 
.mainScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.mainScreen { 
 
    display: flex; 
 
align-items: center; 
 
} 
 

 
#fixation { 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="mainScreen" style="display:none"> 
 
    <table align="center"> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fixation" style="text-align:center;">+</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

に​​を追加します。

document.getElementsByClassName("mainScreen")[0].style.display = "flex"; 
 
document.getElementById("fixation").style.display = "block";

html, 
 
body, 
 
.mainScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.mainScreen { 
 
    display: flex; 
 
} 
 

 
table, #fixation { 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="mainScreen" style="display:none"> 
 
    <table align="center"> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fixation" style="text-align:center;">+</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>