Centering dijit.form.buttons in ContentPane - dojo

Question

I a border container with 3 content panes. left, center, right. A left data grid (left content pane), a right data grid(right content pane), 2 buttons in the center content pane that move things from between grids .
My only problem is formatting of the buttons the buttons always appear at the top of the center content pane. I need them to be horizontally and vertically center of the center pane, regardless of browser size. My experiments have failed to center them.
<div dojoType="dijit.layout.BorderContainer" gutters="false" >
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="left">
<table id="possibleChoices"
dojoType="dojox.grid.DataGrid"
clientSort="true"
queryOptions="{cache:true}"
store="possibleChoices"
noDataMessage="<s:text name="messages.user.noChoiceAvailable"/>"
rowsPerPage="50">
<thead class="hideDojoLoad">
<tr>
<th width="100%" field="name">possible choices</th>
</tr>
</thead>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="text-align: center; vertical-align: middle ">
<button dojoType="dijit.form.Button" type="button" onclick="add"><s:text name="button.addArrow"/></button><br/>
<button dojoType="dijit.form.Button" type="button" onclick="remove"><s:text name="button.removeArrow"/></button>
</div>
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="right">
<table id="choose"
dojoType="dojox.grid.DataGrid"
clientSort="true"
queryOptions="{cache:true}"
store="choose"
noDataMessage="No data found"
rowsPerPage="50">
<thead class="hideDojoLoad">
<tr>
<th width="100%" field="name">Choice Made</th>
</tr>
</thead>
</table>
</div>
</div>
Thanks to anyone that can help a beginner for any help.

Answer 1

the trick is putting a border container in the center content pane with an empty content pane that just takes up space.
<div dojoType="dijit.layout.BorderContainer" gutters="false" >
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="left">
....
</div>
<div dojoType="dijit.layout.ContentPane" region="center">
<div dojoType="dijit.layout.BorderContainer" gutters="false" >
<div dojoType="dijit.layout.ContentPane" region="top" style="height:40%; ">
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="text-align: center; ">
<button dojoType="dijit.form.Button" type="button" onclick="add" style="vertical-align: middle"><s:text name="button.addArrow"/></button><br/>
<button dojoType="dijit.form.Button" type="button" onclick="remove"><s:text name="button.removeArrow"/></button>
</div>
</div >
</div>
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="right">
.....
</div>