一、需求
典型的注冊頁面設計一般是一個三列多行的表格，左列為表單項label，中列為文本框，右列為填寫說明和驗證提示。如下圖
因為整個表單的視覺重心在左中兩列，所以在考慮表單整體相對頁面水平居中和注冊提交按鈕的位置設計時，應當忽略掉右列。
由此來說，右列顯示的填寫說明和驗證提示應當以一個不影響前整體表格寬度的絕對定位來顯示，並且需要顯示在文本框的右側垂直居中位置。
二、html+css實現
absolute定位的提示div放在定位relative的td里面，left設為中列的寬度，top設為50%，margin-top設為-(提示div的高度/2)，這樣便可以做到右側垂直居中了，如下
<td style="font-size:14px;text-align:center;height:100px;position:relative;">
<div style="position: absolute;left: 300px;top:50%;height: 20px;line-height: 20px;margin-top:-10px;background: green;margin-left: 5px;width: 300px;text-align:left;">填寫說明</div>
</td>
這種方式在IE8、chrome中完美實現，但是在IE9中出現了兼容性問題，top:50%並沒有讓它垂直居中。
三、瀏覽器兼容
測試多次完全看不出這50%的基准高度是根據誰來的(如果哪位朋友路過此地並且看出了這個50%的基准元素，請在下面留下您的腳印)，無奈之下只好尋找其他辦法，好在糾結良久之后，終於靈光一閃，把div的display設置為inline-block，並取消top的值設定，就可以像文本一樣實現在td里的垂直居中了(不設置top時，默認top值和td內top最靠上的子元素一致，比如下圖昵稱行中的input)。兩種css方式在chrome中的效果對比如下
雖然修改后的居中效果並不如第一種的效果理想，但是能夠做到兼容ie9，這樣的效果也足夠了，如果追求完美可以給div調整一下margin-top。
四、更多的兼容性問題
此問題本該到此結束了，但是在我為此表單添加了一個頭像行，並且把td內input的width調整為100%時，新的問題又來了，如下圖
次奧，又是一陣分析：
.lineTip{position: absolute;left: 300px;top:50%;height: 20px;line-height: 20px;margin-top:-10px;background: green;margin-left: 5px;width: 300px;text-align:left;}/*這是效果最優的方式，但是ie9不兼容*/ .lineTipFix{position: absolute;left: 300px;display:inline-block;height: 20px;line-height: 20px;background: green;margin-left: 5px;width: 300px;text-align:left;}/*這種方式雖然兼容了ie9實現了提示部分相對td中文本框居右並垂直居中的效果(默認top值和td內top最靠上的子元素一致)。但是有一個前提條件：td中不能存在relative定位並且占滿整個td寬度的元素（比如td中width:100%的input ，如chrome下的昵稱2；td中display:block的div，如頭像）*/
無語，想實現完美的效果並保證兼容性的話，至此，除了放棄table布局，我沒有其他辦法了。
五、Demo
對比IE8/9、chrome查看效果：http://youryida.duapp.com/demo_css/regTipMiddleShow.html
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta charset="utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<style> *{padding:0;margin:0;font-family: 'Microsoft Yahei';} table{border-collapse:collapse;margin: 5px auto;} td{font-size:14px;text-align:center;height:80px;position:relative;} td.label{width:50px;text-align:right;padding-right:10px;} td.label:after{content:":";} td.cont{width:300px;text-align:left;} td input[type="text"]{width:90%;height:25px;} .lineTip{position: absolute;left: 300px;top:50%;height: 20px;line-height: 20px;margin-top:-10px;background: green;margin-left: 5px;width: 300px;text-align:left;}/*這是效果最優的方式，但是ie9不兼容*/ .lineTipFix{position: absolute;left: 300px;display:inline-block;height: 20px;line-height: 20px;background: green;margin-left: 5px;width: 300px;text-align:left;}/*這種方式雖然兼容了ie9實現了提示部分相對td中文本框居右並垂直居中的效果(默認top值和td內top最靠上的子元素一致)。但是有一個前提條件：td中不能存在relative定位並且占滿整個td寬度的元素（比如td中width:100%的input、td中display:block的div）*/
</style>
</head>
<body>
<table id="formTable">
<tr style="background:#ddd;">
<td class="label">姓名</td>
<td class="cont">
<input type="text" id="name"/><div class="lineTip">填寫真實姓名</div>
</td>
</tr>
<tr style="background:#ccc;">
<td class="label">昵稱</td>
<td class="cont">
<input type="text" id="nickName"/><div class="lineTipFix">昵稱為字母數字下划線組合，不可為漢字</div>
</td>
</tr>
<tr style="background:#ddd;">
<td class="label">昵稱2</td>
<td class="cont">
<input type="text" style="width:100%;"/><div class="lineTipFix">昵稱為字母數字下划線組合，不可為漢字</div>
</td>
</tr>
<tr style="background:#ccc;">
<td class="label">頭像</td>
<td class="cont" style="text-align:center;">
<div style="height: 64px;width:64px;background-color: #eee;"></div><div class="lineTipFix">圖片大小應小於2M</div>
</td>
</tr>
</table>
<div style="margin:10px 50px;">
<h3>Intro</h3> 表格有兩列,左側項名，右側項值，並且這兩列決定表格總寬度，整個表格要相對頁面水平居中。為了不影響右列td以及整個表格的寬度，綠色填寫提示部分放在了右列td里面，並且使用絕對定位。<br/> 需求：綠色部分需要在右列td右面，並垂直居中。<br/> 問題：姓名行的填寫提示區域，在IE9中存在錯位bug。<br/> 兼容性解決及糾結：<br/> .lineTip{position: absolute;left: 300px;top:50%;height: 20px;line-height: 20px;margin-top:-10px;background: green;margin-left: 5px;width: 300px;text-align:left;}/*這是效果最優的方式，但是ie9不兼容*/<br/> .lineTipFix{position: absolute;left: 300px;display:inline-block;height: 20px;line-height: 20px;background: green;margin-left: 5px;width: 300px;text-align:left;}/*這種方式雖然兼容了ie9實現了提示部分相對td中文本框居右並垂直居中的效果(默認top值和td內top最靠上的子元素一致)。但是有一個前提條件：td中不能存在relative定位並且占滿整個td寬度的元素（比如td中width:100%的input ，如chrome下的昵稱2；td中display:block的div，如頭像）*/<br/><br/> 感悟總結及解決辦法：<br/> 次奧，td的瀏覽器兼容性太不靠譜了，我決定放棄table布局了，over。 </div>
</body>
</html>
六、思考總結
如果需要進行比較復雜的定位布局，請不要使用table。