I have a table that needs to be aligned in the dead center of the page. But I can’t figure out how to align it vertically.
What is the efficient way to do this?
#textcenter {
vertical-align: middle;
display: table-cell;
background-color: #DCDCDC;
border-radius: 25px;
margin: auto;
}
<table ALIGN="center" id="textcenter">
<th>Hello</th>
</table>
>Solution :
If you want it to be on the center of the page no matter what. Use absolute:
.center{
/* Center Code */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
/* Your Code */
background-color: #DCDCDC;
border-radius: 25px;
margin: auto;
/* Improved Styling - You can ignore this */
padding: 5px;
}
<table class="center">
<th>Hello</th>
</table>
You can also create a flex container on the outside.