position absoluteを使い画像とテキストを中央に表示したい。

Question

divタグで画像とテキストを囲いabsoluteを使って中央に表示したいです。
画像だけにabsoluteをつけたときは画像が中央に表示されるのですがdivタグにabsoluteをつけたときは中央に表示されません。
わかる人いましたらご教授お願いしたいです。

画像にabsoluteをつけた時

import { FunctionComponent } from 'react';

const Index: FunctionComponent = () => {
  return (
    <>
        <img
          src="profile.svg"
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            margin: 'auto',
          }}
        />
    </>
  );
};

export default Index;

divにabsoluteをつけた時

const Index: FunctionComponent = () => {
  return (
    <>
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          margin: 'auto',
        }}
      >
        <img src="profile.svg" />
        <p>プロフィール</p>
      </div>
    </>
  );
};

export default Index;

Answer 1

position: 'absolute'は要素を絶対位置で指定するものなので、
親要素のdivにつけるとdiv自体が絶対位置になり子要素であるimgやpには影響を与えません。
※ご提示のCSSの場合です。

親要素のdivにはposition: 'relative'をつけてあげましょう。
子要素であるimgやpにposition: 'absolute'をつけた時の基準が親要素のdivになります。
※親要素を基準として上下左右から0、余白を自動としてやることにより、中央配置になる仕組みです。

Comments

[kakedashidesu]

返信ありがとうございます。
なぜimgタグにabsoluteをつけたときは中央になるのにdivだと真ん中にならないのですか？

[退会済みユーザー]

えーっと…説明したのだけど期待されている回答と違ったようですね。
「同じことをしてるはずなのに、なぜ結果が違うのか？」という問いなんですね？

恐らく`bottom: 0,`が抜けてるからではないでしょうか。
上（画像）にはありますが、下（div）にはないですよね？
上下左右から0距離に配置し、余白（margin）を自動にすると、中央配置になる仕組みですので、
`bottom: 0;`が抜けていることにより上下方向が中央になっていない。

これで期待された回答になりましたでしょうか？

[kakedashidesu]

返信遅れました。
bottomをつけてみましたが中央にはなりませんでした

[退会済みユーザー]

１．divの中で要素が中央配置になっていないため、divが中央配置になっていないように見える。
２．divの外の要素のサイズが画面幅よりも大きいため、divが中央配置になっていないように見える。

このどちらか、もしくは両方かと。
検証ツールを使って確認してみてください。
divに背景色を付けてもわかりやすくなります。

[kakedashidesu]

やってみましたが解決策がよくわかりませんでした。

[kakedashidesu]

1,2どちらでもなかったです

[退会済みユーザー]

検証ツール等でdiv,img,pに当たっているCSSを確認後、
実際に当たっているCSSをコードとして追加していただけますでしょうか。
ご提示のコード以外にHTML要素があるようでしたらそちらも追記してください。
それからコード実行時にどのように見えているのかキャプチャを載せていただけると助かります。