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

当我将绝对值添加到图像中时，图像已居中。
我希望图像标记和带有div标记的p标记居中，我希望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;

---

试着给你的div a，然后这样做：

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

---

可能会给div一个相对位置，或者自动边距0，或者类似的东西

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

---

如果要垂直和水平居中于屏幕，应使用位置：固定``位置：绝对将项目定位到相对的父项或整个网站。然而，绝对定位或固定定位是使元素居中的一种不好的方法。它的方式更容易和响应使用Faskbox来实现这一点。我使用绝对值，因为我想把最前面的div放在中间。不解释使用<代码>位置：绝对< /代码>。还有很多其他方法来集中元素。如果你想让屏幕居中而不是网站，你需要使用

position:fixed

我想使div标记的大小与子元素的大小相同，但div标记的大小在屏幕上分布。我可以使div标记与图像和文本的大小相同吗？现在，div标签分布在屏幕上。

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

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