position: relative の divブロック

tableにpositionプロパティ。

上のposition プロパティは、position: relative にしたdivブロックの中に、position: absolute の tableタグを２つ全く同じようにleft, topでオフセットし (topの値は0) 、テーブルのwidth, heightも揃え、text-alignもcenterにしている。

後に記述した方 (この場合テキスト文字) が上に来る。position: absolute を与えたところには、display プロパティが上手く利かないのか、text-align は設定できても vertical-align は反映しなかったので、上下を中央揃えしたい方を relative にしないといけない。
両方がrelativeだと重ねられないし、位置関係もおかしくなる。

今回のような、tableタグを使った場合は自動的に上下は中央揃えになるので関係ないが、displayプロパティでテーブルセルにした場合には気を付けないと。以下はすべてdivに display: table-cell での実験。
tdタグと違ってデフォルトでボーダーはない。

右のイメージは
position: relative
このテキスト部分は
position: absolute
こっちを先に記述する必要がある。

右のイメージは
position: absolute.
vertical-align: middle
を当てているが効いていない。

absolute を relative の上に重ねるとこのようになってしまう。

結局どれも上手く行かない。一番下のは top: ○○px と指定して下へずらせば良いのかも。でもやっぱり素直に table タグを最初から使えば良いということかな。