Vertically centering button using css - html

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>

Answer 2

If you make your button an inline element and add text-align: center to the parent td you should be fine.
.tools {
text-align: center;
}
.submit {
display: inline;
}
<table width="500" border="1">
<tr>
<td width="390">XXXXXXXXX</td>
<td class="tools" width="110" rowspan="2" valign="middle"><input class- "submit" 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>