中心文本​​標記

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

添加​​到.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

你可以居中<table>還有：

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>