How to vertically stack components within a div (React.JS)?

Question

I am currently trying to sketch out the look of a single page app which would display a random profile picture and additional information on the person from an API (which will be implemented later). The app would mainly consist of a container, which would hold all the components within a box in the center of the screen. Within this container the profile picture would then be placed directly in the center with additional information about the user such as their name directly under the picture with equal spacing from the left and right edges of the container.

However, due to my inexperience I am having difficulties both centering the profile picture and displaying the text below that picture with equal spacing from the edges. After going through many similar questions none of them seem to be solving my issue, so any help would be greatly appreciated!

The code is as follows:

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;

ProfileContainer.js

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;

ProfileContainer.css

.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;
  }

ProfilePicture.js

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;

ProfilePicture.css

.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%;
}

UserSubtitle.js

import React from 'react';

const UserSubtitle = () => {

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

export default UserSubtitle;

At the current moment in time I have both the user image and subtitle h2 tags centered vertically within their container. However. they are on the same row and not centered at all horizontally. Once again if you choose to assist me I truly appreciate any and all help provided!

Answer 1

Maybe this can help:

.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;
}

You can play with the grid columns as you see best.