ボタンを中央寄せするには？
画面を<div>で左側、中央、右側と3分割して左側には選択済み機能一覧、右側には選択可能な
機能一覧を持ちます。
中央divには「＞＞」ボタンと「＜＜」ボタンを配置して右側の選択可能一覧から選択または
解除を出来るようにしています。
やりたい事は、「＞＞」ボタンと「＜＜」ボタンを水平方向で中央、垂直方向で中央に
配置したいのですが、添付画像の通り水平方向は中央なのですが垂直方向が下側に
配置されてしまいます。
水平方向で中央かつ垂直方向で中央に配置するにはどのようなhtml,cssにすれば良いでしょうか？
css,html抜粋を示します。
アドバイスお願いします。
div.l_list,div.r_list {
display: inline-block;
width:30%;
height:70% ;
}
div.button_area {
display: inline-block;
text-align: center;
vertical-align: center;
width:30%;
height:100% ;
}
select {
width:100%;
height:100%
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ChooseSecondlyRole.css">
<script type="text/javascript" src="ChooseSecondlyRole.js"></script>
<title>Choose Secondly Role</title>
</head>
<body>
<div class="wrap">
<div class="cur_role">
<select id="l_select" name="l_select" size="25">
<option value='aa'>aa</option>
<option value='admin'>admin</option>
<option value='admin-gui'>admin-gui</option>
<option value='webdavfs-admin'>webdavfs-admin</option>
</select>
</div>
<div class="button_area">
<div class="button_base">
<div>
<input type="button" class="add_button" value="<<" onClick="onClickAdd()" />
</div>
<div>
<input type="button" class="remove_button" value=">>" onClick="onClickRemove()" />
</div>
</div>
</div>
<div class="selectable_role">
<select id="r_select" name="r_select" size="25">
<option value='aa'>aa</option>
<option value='admin'>admin</option>
<option value='admin-gui'>admin-gui</option>
<option value='bbb'>bbb</option>
<option value='guest'>guest</option>
<option value='role0101'>role0101</option>
<option value='role0102-001'>role0102-001</option>
<option value='role0103'>role0103</option>
<option value='sdk-soft'>sdk-soft</option>
<option value='webdavfs-admin'>webdavfs-admin</option>
</select>
</div>
</div>
</body>
</html>
補足
事情がありフレームワークは使用できません。 似たような事情からJavaScriptはできるだけ使いたくないのですが、絶対に無理であれば諦めて使います。