CSS:tableのtd内の文字位置調整に関して

Question

前提・実現したいこと

ワードプレスで記事を書いています
その中でtableを使って表を作成しています
左の表の文字位置をtd内の中央に位置させたいと考えています。

発生している問題・エラーメッセージ

右のtd内のの行数に応じて左のtdの高さも広がってしまい、中央に揃えることができず上揃いになってしまう。

該当のソースコード

table{
width: 100%;
border-collapse:separate;
border-spacing: 0;
}

table th:last-child{

border-right: 1px solid #3c6690;
}

table th{
text-align: center;
color:white;
background: linear-gradient(#829ebc,#225588);
border-left: 1px solid #3c6690;
border-top: 1px solid #3c6690;
border-bottom: 1px solid #3c6690;
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
width: 25%;
padding: 10px 0;
}

table td{
text-align: center;
border-left: 1px solid #a8b7c5;
border-bottom: 1px solid #a8b7c5;
border-top:none;
box-shadow: 0px -3px 5px 1px #eee inset;
width: 25%;
padding: 10px 0;
}

table td:last-child{
border-right: 1px solid #a8b7c5;
}

css/table

試したこと

・左のtdの高さ調整
・heightをautoにしてみるなど細かい調整などは試みました
ご教授よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

vertical-align:middle;

<style>
table{
width:50%;
  border-collapse:collapse;
}
td{
padding:10px;
border:solid 1px #000000;
text-align: center;
vertical-align:middle;
}
</style>

<table>
<tr>
<td>ああ</td>
<td>いい<br>うう</td>
</tr>
<tr>
<td>かか<br>きき</td>
<td>くく<br>けけ<br>ここ</td>
</tr>
</table>

Answer 2

上下中央にしたいのであればいくつか方法はあると思いますが、Flexboxを使うと簡単にできると思います。
td内の文字をdivで囲った後に、cssに以下を追加してみてください。

table td{
 display: flex;
 justify-content: center;
 align-items: center;
}

参考:https://ics.media/entry/17522/