I'm currently working with Bootstrap 4 and I am trying to vertically center the table div in the middle of the screen. I attempted using `align-items-center` on its parent element but it did not have the desired effect.
Below is my HTML code:
<div id="gameTable" class="d-flex h-100">
<div class="container align-items-center text-center h-100">
<table class="table text-center" id="table">
<tbody>
<tr>
<td class="align-middle">1</td>
<td class="align-middle">2</td>
<td class="align-middle">3</td>
</tr>
<tr>
<td class="align-middle">4</td>
<td class="align-middle">5</td>
<td class="align-middle">6</td>
</tr>
<tr>
<td class="align-middle">7</td>
<td class="align-middle">8</td>
<td class="align-middle">9</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" id="quit">Quit Game</button>
</div>
</div>
Furthermore, below you will find my CSS:
html, body {
height: 100%;
}
#table {
height: 70%;
}
#gameTable {
height: 100%;
display: none;
}
Could someone please assist me in identifying any potential issues within my code?