html - How to align the form to the center properly? -

i can set form width manually every changes in <input> width lead troubles, i'll should adjust form width again. need scalable alignment i.e. changes in input width shouldn't impact on form's alignment.

form {      width: 400px;      margin: 0 auto;  }  [type=text] {      /* width: 100px; */  }  canvas {      display: block;      margin: 10px auto;      border: 1px dashed gray;  }

<form>      <input type="text"   id="left"/>      <input type="submit" value=">>"/>      <input type="text"   id="right"/>  </form>  <canvas width="40" height="200"></canvas>

you can set form display:table, , don't need set width @ all.

form {      margin: 0 auto;      display: table;  }

<form>      <input type="text" id="left"/>      <input type="submit" value="&gt;&gt;"/>      <input type="text" id="right"/>  </form>