我想把它放在屏幕的中间，我想让 div 标签成为子元素的大小[重复]

Question

这个问题在这里已经有了答案：

如何在 div 中将绝对定位的元素居中？ (35 个回答)

如何使“位置：绝对”元素居中29 个答案

5 个月前关闭。

当我向图像添加绝对值时，图像居中。
我想用 div 标签将图像标签和 ap 标签居中，并且我希望 div 标签以绝对居中，但它不居中

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;

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

export default Index;

Answer 1

尝试给你的 div 一个 with 然后这样做：

width: 80vw;
left: 50%;
margin-left: -40vw;

Answer 2

也许给 div 一个 position relative 或 margin 0 auto 或类似的东西

display: flex;
  align-items: center;
  justify-content: center