html - 我想把它放在屏幕的中间中心，我想让 div 标签成为子元素的大小

Question

当我向图像添加绝对值时，图像居中。
我想用 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;

标签： htmlcssreactjssass

Answer 1

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

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