Javascript 如何在div（React.JS）中垂直堆叠组件？

我目前正试图勾勒出一个单页应用程序的外观，该应用程序将显示一个随机的个人资料图片和来自API（稍后将实现）的有关此人的附加信息。该应用程序将主要由一个容器组成，该容器将所有组件放在屏幕中央的一个盒子内。在这个容器中，配置文件图片将直接放在中心，并带有关于用户的附加信息，例如他们的名字，直接放在图片下方，与容器左右边缘的间距相等

然而，由于我的经验不足，我很难将配置文件图片居中，也很难以与边缘相等的间距显示图片下方的文本。在经历了许多类似的问题之后，他们似乎都没有解决我的问题，因此任何帮助都将不胜感激

代码如下：

App.js

import React from 'react';
import './App.css';
import ProfileContainer from './components/ProfileContainer/ProfileContainer';

function App() {
  return (
    <div className="App">
      <ProfileContainer/>
    </div>
  );
}

export default App;

import React from 'react';
import './ProfileContainer.css'
import ProfilePicture from '../ProfilePicture/ProfilePicture';
import UserSubtitle from '../UserSubtitle/UserSubtitle';

const ProfileContainer = () => {


    return (
        <div className='profile_container'>
                <ProfilePicture/>
                <UserSubtitle/>
        </div>

    )
};

export default ProfileContainer;

.profile_container {
    background: grey;
    background-size: 100%;
    
    width: 70%;
    height: 70%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    align-items: center;
    justify-content: center;
  }

import React from 'react'
import './ProfilePicture.css'

const ProfilePicture = () => {

    return (
        <div className='profile_picture'>
            <img src={require('../../Habee.png')} alt='portrait' />
        </div>
    )
}

export default ProfilePicture;

.profile_picture {
    width: 100px;
    height: 100px;
    border-radius: 60%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    margin: 0;
    position: absolute;
    
}

.profile_picture img {
    width: 100%;
}

import React from 'react';

const UserSubtitle = () => {

    return (
        <div className='user_subtitle'>
            <h2>Information Subtitle</h2>
        </div>
    )
};

export default UserSubtitle;

ProfilePicture.js

import React from 'react';
import './App.css';
import ProfileContainer from './components/ProfileContainer/ProfileContainer';

function App() {
  return (
    <div className="App">
      <ProfileContainer/>
    </div>
  );
}

export default App;

import React from 'react';
import './ProfileContainer.css'
import ProfilePicture from '../ProfilePicture/ProfilePicture';
import UserSubtitle from '../UserSubtitle/UserSubtitle';

const ProfileContainer = () => {


    return (
        <div className='profile_container'>
                <ProfilePicture/>
                <UserSubtitle/>
        </div>

    )
};

export default ProfileContainer;

.profile_container {
    background: grey;
    background-size: 100%;
    
    width: 70%;
    height: 70%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    align-items: center;
    justify-content: center;
  }

import React from 'react'
import './ProfilePicture.css'

const ProfilePicture = () => {

    return (
        <div className='profile_picture'>
            <img src={require('../../Habee.png')} alt='portrait' />
        </div>
    )
}

export default ProfilePicture;

.profile_picture {
    width: 100px;
    height: 100px;
    border-radius: 60%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    margin: 0;
    position: absolute;
    
}

.profile_picture img {
    width: 100%;
}

import React from 'react';

const UserSubtitle = () => {

    return (
        <div className='user_subtitle'>
            <h2>Information Subtitle</h2>
        </div>
    )
};

export default UserSubtitle;

UserSubtitle.js

import React from 'react';
import './App.css';
import ProfileContainer from './components/ProfileContainer/ProfileContainer';

function App() {
  return (
    <div className="App">
      <ProfileContainer/>
    </div>
  );
}

export default App;

import React from 'react';
import './ProfileContainer.css'
import ProfilePicture from '../ProfilePicture/ProfilePicture';
import UserSubtitle from '../UserSubtitle/UserSubtitle';

const ProfileContainer = () => {


    return (
        <div className='profile_container'>
                <ProfilePicture/>
                <UserSubtitle/>
        </div>

    )
};

export default ProfileContainer;

.profile_container {
    background: grey;
    background-size: 100%;
    
    width: 70%;
    height: 70%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    align-items: center;
    justify-content: center;
  }

import React from 'react'
import './ProfilePicture.css'

const ProfilePicture = () => {

    return (
        <div className='profile_picture'>
            <img src={require('../../Habee.png')} alt='portrait' />
        </div>
    )
}

export default ProfilePicture;

.profile_picture {
    width: 100px;
    height: 100px;
    border-radius: 60%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    margin: 0;
    position: absolute;
    
}

.profile_picture img {
    width: 100%;
}

import React from 'react';

const UserSubtitle = () => {

    return (
        <div className='user_subtitle'>
            <h2>Information Subtitle</h2>
        </div>
    )
};

export default UserSubtitle;

从“React”导入React；
const UserSubtitle=（）=>{
返回(
信息字幕
)
};
导出默认用户字幕；

在当前时刻，我有两个用户图像和字幕h2标签垂直居中在他们的容器中。然而。它们位于同一行，在水平方向上完全不居中。再一次，如果你选择帮助我，我真的非常感谢你提供的一切帮助

也许这有助于：

.profile_container {
    background: grey;
    background-size: 100%;
    
    width: 70%;
    height: 70%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: auto auto auto;  /*Add this*/
    align-items: center;
    justify-content: center;
  }

.profile_picture {
    width: 100px;
    height: 100px;
    border-radius: 60%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    margin: 0;
    grid-column-start: 1; /*Add this*/
    grid-column-end: 4; /*Add this*/
}

.profile_picture img {
    width: 100%;
}

/*Add all this*/
.user_subtitle {
  grid-column-start: 1;
  grid-column-end: 4;
}

---

您可以按自己的最佳方式使用网格列。

从

中删除
位置：绝对
。配置文件\u picture

并更改

边距：0

边距：自动