参考:
https://app.codegrid.net/entry/css-table-1
tableでwidthを指定しても幅が固定されない場合の対処法
1.スタイルシートに以下を設定した<div>を作る
display: table;
table-layout: fixed; // IEで横幅が変わらないようにするために必要
2.1の中に、スタイルシートに以下を設定した<div>を作る
display: table-cell;
text-align: center;
vertical-align: middle;
3.2の中に、<img>を作る。
サイズに合わせて画像を縮小するために以下を設定する。
max-width: 100%;
max-height: 100%;
例えば、下記の通り。
<div style="
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
display: table;
table-layout: fixed;
">
<div style="
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 0;
">
<!-- line-heightに別の値が設定されていると若干ずれる -->
<img src="image.jpg" style="
max-width: 100%;
max-height: 100%;
">
</div>
</div>
サンプル
※テキストを中央に配置する場合は、<img>の代わりに<span>を使う
以上