Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: I'm unsure if the outer div is needed. My goal is to center the table and make it fixed so it ignores width changes. Currently, the table moves to the left when its size changes to stay centered. How can I prevent this? Here is my current code:
.main
{
position: relative;
width: 600px;
left: calc(50% - 300px);
border: 1px solid #000;
}
.table
{
margin: 0 auto;
}
<div class="main">
<table class="table">
<tr><td>Username: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
<tr><td>Password: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
</table>
</div>