Estoy creando una tabla que quiero que vaya en el centro de la pagina a la hora de mostrar la informacion,pero por alguna razon no se centra, esta asi:
en la esquina de la pagina y no se mueve,
aqui les muestro el codigo html:
<div id="see_actual_products">
<section class = "see_actual_products_section">
<div id="products">
<h1 v-if="showProducts == true">{{message}}</h1>
</div>
<table id="table_container_actual_products">
<tr>
<th v-bind:colspan = "length" >Actual products in making.</th>
</tr>
<tr>
<td>
<table id ="table_actual_products" v-for="i in listCurrentproducts">
<caption> {{i.room}}</caption>
<tr>
<td>
Name:
{{i.name}}
</td>
</tr>
<tr>
<td>
LOT:
{{i.lot}}
</td>
</tr>
<tr>
<td>
Quantity to be package:
{{i.quantity_to_package}}
</td>
</tr>
<tr>
<td>
Quantity of pallets:
{{i.pallets}}
</td>
</tr>
<tr>
<td>
Progress:
{{i.progress}}
</td>
</tr>
<tr>
<td>
{{i.finished_pallets}} pallets of {{i.pallets}} pallets
<button @click="addPallet(i.room)">Add Pallet</button>
</td>
</tr>
<tr v-if="i.pallets == i.finished_pallets">
<td>
<h3>Completed</h3>
<button @click="finish(i.room)">Finish procedure</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
</div>
el id see_actual_products lo uso solamente para Vuejs, el contenedor que estoy usando para centrar completamente es el section "see_actual_products_section", pero como dije anteriormente no me lo centra, aqui el codigo css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;}
.see_actual_products_section{
margin: auto;
padding: 20px;
border-radius: 4px;}
he buscado y dicen de usar text-aling:center pero solo centra los textos dentro de section, float, igual, gracias :)