IE11で縦書きを上下左右中央寄せで表示させたい

現在、社で改修中のHTMLモダンブラウザ対応業務で
分からないことが発生したため質問させてください。

表題の通り、IE11上で縦書きの文言を<table>のセル内で上下左右中央寄せで
表示しようと思っています。
IE8時代に使用していたHTMLの改修で、IE8とIE11の両方で
同様の見た目になるよう調整する必要があります。
IE8・IE11以外のブラウザは考慮しません。

現在のIE8では、ソースは以下のようになっています。
(8/30 20:43追記)
ソース中の文言は可変長で、<td>の高さ一杯に到達したら折り返して表示されます。

HTML
1<table border="0" cellspacing="1" cellpadding="0">
2	<tr height="100px">
3		<td width="30px" class="tategaki_center">
4			縦書き中央寄せしたい文言（※可変長）
5		</td>
6	</tr>
7</table>

CSS
1td.tategaki_center
2{
3    text-align:center;
4    font-size:9pt;
5    writing-mode:tb-rl;
6    padding-top:6px;
7}

IE8では<td>の中で文言が上下左右均等に中央寄せになって表示されますが、
IE11では<td>のレイアウトが崩れてしまいました(セルが指定した大きさにならず非常に小さくなる)。
そこで、<td>から縦書きにするCSS"writing-mode:tb-rl;"を取り除き、
縦書きにしたい文字列を<div>で囲み、<td>ではなく<div>に縦書きのプロパティを設定し
中央寄せのレイアウトを実現しようと思いましたが上手くいきません。
text-align:center; と vertical-align:middle;を使用したもののvertical-alignは縦書きに影響せず、
文字列が可変長のため、<div>にdisplay:table-cell;を指定するとmargin:auto;で中央寄せできず
これ以上の案が考えつかず困っております。

何か良い方法をご存知の方がいらっしゃいましたら知恵をお貸しください。

以下は先述のコードとは異なりますが、縦書き中央寄せができないか考えつつ記述したテストコードです。
IE11で表示すると文言を囲っている<div>が親要素<div>左端に寄ってしまいます。
left,rightの値を設定していないため当然ですが…
尚、上下はtext-align:center;で中央寄せが出来ています。

HTML
1<table style="table-layout: fixed;word-break: break-all;width: 0px;">
2	<col style="width:100px">
3	<col style="width:100px">
4	<col style="width:100px">
5	<tr>
6		<td style="height:120px">
7			<div class="div_tategaki_parent">
8				<div class="div_tategaki_center">あいうえお</div>
9			</div>
10		</td>
11		<td style="height:120px">
12			<div class="div_tategaki_parent">
13				<div class="div_tategaki_center">かきくけこ</div>
14			</div>
15		</td>
16		<td style="height:120px">
17			<div class="div_tategaki_parent">
18				<div class="div_tategaki_center">さしすせそ<br>たちつてと</div>
19			</div>
20		</td>
21	</tr>
22</table>

CSS
1td {
2	border: solid 1px #000000;
3}
4div.div_tategaki_parent {
5	margin: 0;
6	padding: 0;
7	width: 100%;
8	height: 100%;
9	position: relative;
10}
11div.div_tategaki_center{
12	position: absolute;
13	border: solid 1px #FF0000; /* 大きさが見えやすいようテスト中は枠をつける */
14	writing-mode: tb-rl; /* 縦書き */
15	top:0;
16	bottom:0;
17	margin: auto;
18	text-align: center;
19}

行動規範の内容に同意します

回答1件

自己解決

申し訳ありません、自己解決できました。
最下部に記載しているCSSを以下の内容に変更することで目的のレイアウトで表示させることができました。

CSS
1div.div_tategaki_center{
2	position: absolute;
3	writing-mode: tb-rl; /* 縦書き */
4	top:0;
5	bottom:0;
6	text-align: center;
7	left:50%;
8	transform:translate(-50%, 0%);
9}