HTML5 How to align a table to center inside a form?

Question

I have a <form>, and inside that form, I have a <table>. I tried using text-align: center and align-items:center on that form, but the table inside it is still aligned to the left (while the table's child elements are aligned to the center inside that table). How can I align a table the the center, inside a form?

Answer 1

When u want to align a table in the center position of the parent, simply use:

css:

margin: 0 auto;

EXAMPLE:

html:

<form >
 <table>

 </table>
</form>

css:

form {
  width:80%; 
  height: 200px; 
  background-color: black;
}

table {
   margin: 0 auto;
   z-index: 1;
   width:50%; 
   height: 50px; 
   background-color: red;
}

http://jsfiddle.net/bvo7v7f9/