position absoluteで画像をテキストを真ん中にしたい

テキストhogehogeをabsoluteを使って画面の中央に配置したいです。
下記のスタイルを当ててみたのですがテキストが中央になりません。
どうしたらいいでしょうか？

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

const Index: FunctionComponent = () => {
  return (
    <>
      <div className="bg-index height-100vh">
        <p className="fs-98 inline-block">hogehoge</p>
      </div>
    </>
  );
};

export default Index;

// display
div,
span,
p {
  &.inline-block {
    display: inline-block;
  }
}

p {
  &.fs-98 {
    font-size: 98px;
  }
//backgroundColor
div,
img,
p {
  &.bg-index {
    background-color: #c6d6ee;
  }
}

// height
div {
  &.height-100vh {
    height: 100vh;
  }
}
}

Lhankor_Mhy

2021/04/02 01:02

SCSSのかっこの閉じ方が間違っているような気がします。 SCSSが間違っていないなら、HTML構造に問題があるかもしれません。

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

回答1件

ベストアンサー

margin: auto; を機能させるには、width: height: の設定が必要だそうです。

HTML
1<body>
2  <div>
3    <p style="position: absolute; font-size: 98px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 400px; height: 100px;">hogehoge</p>
4  </div>
5</body>

投稿2021/04/02 00:20