Vertical centering within the CSS2 box model seems to generate endless discussions; typical:
http://www.google.com/search?q=+site:lists.w3.org+css+vertical+center&hl=en&lr=&ie=UTF-8&oe=UTF-8&start=0&sa=N
http://www.milov.nl/forum/1/28
Should be easy (like text-align). Here's a simple JS solution:
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">
function getElement(id) {
return document.getElementById ? document.getElementById(id) :
document.all ? document.all(id) : null;
}
function getClientWidth() {
return document.body && document.body.clientWidth ? document.body.clientWidth :
window.innerWidth ? innerWidth : null;
}
function getClientHeight() {
return document.body && document.body.clientHeight ? document.body.clientHeight :
window.innerHeight ? innerHeight : null;
}
function client_center(id) {
var el = getElement(id);
if (el && el.offsetWidth)
el.style.left = String(getClientWidth()/2 - el.offsetWidth/2 + 'px');
el.style.top = String(getClientHeight()/2 - el.offsetHeight/2 + 'px');
}
function show() {
for (var a=0; a<arguments.length; ++a) {
var el = getElement(arguments[a]);
if (el && el.style) el.style.visibility = 'visible';
}
}
onload = function() {
client_center('controls');
show('controls');
}
</script>
</head>
<body>
<DIV id="controls" style="BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; Z-INDEX: 101; BORDER-LEFT: thin outset; WIDTH: 407px; BORDER-BOTTOM: thin outset; POSITION: absolute; HEIGHT: 235px; BACKGROUND-COLOR: lightgrey;visibility:hidden;" ms_positioning="GridLayout">
<input name="m_TextBox" type="text" value="10" maxlength="10" id="m_TextBox" onselect="setCaretPos(this);" onkeyup="setCaretPos(this);" onclick="setCaretPos(this);" onblur="return validateInput(this, event)" onkeypress="return checkInput(this, event)" maxvalue="32767" minvalue="0" nrtype="Integer" style="Z- INDEX:108;LEFT:20px;POSITION:absolute;TOP:15px;background-color:#e9efff;text-align:right;" /><input name="m_TextBox2" type="text" value="55" maxlength="5" readonly="readonly" id="m_TextBox2" disabled="disabled" style="Z- INDEX:104;LEFT:20px;POSITION:absolute;TOP:51px;background-color:#d7dcd2;text-align:right;" /><input name="m_TextBox3" type="text" value="10.00000" maxlength="10" id="m_TextBox3" onselect="setCaretPos(this);" onkeyup="setCaretPos(this);" onclick="setCaretPos(this);" onblur="return validateInput(this, event)" casasrepr="3" tiporound="TYP_UPPER" maxvalue="99999.99999" onkeypress="return checkInput(this, event)" minvalue="0" nrtype="Double" casasdec="5" style="Z- INDEX:102;LEFT:20px;POSITION:absolute;TOP:86px;background-color:#e9efff;text-align:right;" />
<input name="m_TextBox4" type="text" value="10.000" maxlength="10" id="m_TextBox4" style="Z- INDEX:103;LEFT:20px;POSITION:absolute;TOP:119px;background-color:#e9efff;text-align:right;" />
<input name="m_TextBox5" type="text" maxlength="5" id="m_TextBox5" style="Z- INDEX:101;LEFT:20px;POSITION:absolute;TOP:151px;background-color:white;text-align:left;" />
<input name="m_TextBox6" type="text" value="10" maxlength="10" id="m_TextBox6" style="Z- INDEX:105;LEFT:20px;POSITION:absolute;TOP:188px;background-color:#e9efff;text-align:right;" /><input type="submit" name="Button1" value="Button" id="Button1" style="Z-INDEX: 106; LEFT: 317px; POSITION: absolute; TOP: 15px" />
<input name="TextBox1" type="text" id="TextBox1" onblur="ConfirmDialog('Do you want to continue?');" style="Z-INDEX: 107; LEFT: 219px; POSITION: absolute; TOP: 51px" />
<DIV style="BORDER-RIGHT: thin groove; BORDER-TOP: thin groove; Z-INDEX: 110; LEFT: 238px; BORDER-LEFT: thin groove; WIDTH: 137px; BORDER-BOTTOM: thin groove; POSITION: absolute; TOP: 86px; HEIGHT: 100px" ms_positioning="GridLayout">
<table id="RadioButtonList1" border="0" style="Z-INDEX: 109; LEFT: 26px; POSITION: absolute; TOP: 20px">
<tr>
<td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_0">Radio 1</label></td>
</tr><tr>
<td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_1">Radio 2</label></td>
</tr>
</table>
</DIV>
</DIV>
</body>
</html>