Vertically centering button using css

Question

I am trying to make a simple input button center-align within a table cell.

My markup is:

<table width="500" border="1">    <tr>      <td width="390">XXXXXXXXX</td>      <td width="110" rowspan="2" valign="middle"><input type="button" value="submit"></td>    </tr>    <tr>      <td>YYYYYYYY</td>    </tr>  </table>  <br /><br />  <div style="width:500px;">    <div style="float:left;width:390px;">      <div>XXXXXXX</div>      <div>YYYYYYY</div>    </div>    <div style="vertical-align:middle;width:110px;float:right;">      <div><input type="button" value="submit"></div>    </div>  </div>

I have done a table version showing you the layout that I am trying to achieve. Note that the text represented by "XXXXX" or "YYYYYY" is of variable length.

Answer 1

http://jsfiddle.net/8v8gLn4y/

.container {    background: lightblue;    display: table;    width:100%;  }            input[type=button] {        display: block;    width: 50%;    margin: 0 auto;  }            .button-wrapper {    background: darkorange;    display: table-cell;    vertical-align: middle;  }

<div class='container'>          <div>some line with text</div>    <div>another line with text</div>              <div class='button-wrapper'>      <input type="button" value="submit"  />    </div>        </div>

update 2016:
flexbox

.container {    background: bisque;    display: flex;    width: 100%;  }    .container>div {    flex-grow: 1;  }    .button-wrapper {    background: chocolate;    display: flex;    flex-direction: column;    justify-content: center;  }    input[type=button] {    display: block;    width: 50%;    margin: 0 auto;    flex-shrink: 1;  }

<div class='container'>      <div>      <p>some line with text</p>      <p>another line with text</p>    </div>      <div class='button-wrapper'>      <input type="button" value="submit" />    </div>    </div>