center table in page HTML - html

Question

I'm trying to center this header in the middle of the page. Not sure why margin-left:auto and margin-right:auto isn't working. It won't register align:center either for the table. The table is only a header. Here's the code I have for the css and table.
<style>
table {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
}
table th {
background: linear-gradient(to bottom right, #6688FF, #AACCFF);
height: 4em;
text-align: center;
text-transform: capitalize;
color:white;
border:#ccc 1px solid;
}
table tr {
text-align: center;
}
table thead {
position:fixed;
}
</style>
<table class="head">
<%--header --%>
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<%--body --%>
<tbody>
</tbody>
</table>

Answer 1

Since you're making the thead fixed, it's pulled out of the normal flow. Below, I've demonstrated one way to center it horizontally independent of its surroundings. Otherwise, you're better off making the table fixed, since semantically they should continue their parent / child relationship.
Is there a reason that you're a table for this?
table {
margin-top: 2em;
}
table th {
background: linear-gradient(to bottom right, #6688FF, #AACCFF);
height: 4em;
text-align: center;
text-transform: capitalize;
color:white;
border:#ccc 1px solid;
}
table tr {
text-align: center;
}
table thead {
position:fixed;
left: 50%;
transform: translateX(-50%);
}
<table class="head">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Answer 2

remove position fixed from table thead selector and it should work