How to center hero image on mobile phone

I'm building a simple "Coming soon" page and trying to figure out how to position my hero image in the center. Currently it looks fine on desktop but on mobile the text nicely centered but the hero image is not. You can check it out for yourself here: https://quintillion.ai/

I would like to have it such that the image is always positioned in the center and if need be it would just show a black background above and below the image.

Here is my html and css code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background-image: url("https://picsum.photos/1000/1000");
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  background-position-y: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height:100%;
  margin: 0;
  padding: 0;
}
.overlay {
  box-shadow: inset 0 0px 0 1000px rgba(0, 0, 0, 0.6);
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;  
  justify-content: center; /* Added */
  align-items: center; /* Added */
}

.text {
  font-family: Arial, sans-serif;
  background-color: rgba(0, 0, 0, 0.0);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 60px;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  margin-bottom: 20px;
}

<!-- language: lang-html -->

<div class="overlay">
  <div class="text">
    <h1>Quintillion AI</h1>
    <h2>Coming soon</h2>
    <p>
      We are currently in stealth mode, building AI Assistants for the future of work.
      <br>Please check back soon for updates.
    </p>
  </div>
</div>

<!-- end snippet -->

To make a background-image cover the entire space use background-size: cover;. Here's a shorthand for your code:

body {
  background: #000 url("https://picsum.photos/1000/1000") no-repeat center / cover;
  /* remove the other background-* properties ... */
  /* other styles ... */
}

Solution

You didn't add display: flex and flex-direction: column to .text class.

.text {
  display: flex; /* here */
  flex-direction: column; /* here */
  justify-content: center;
  align-items: center;
}

and add CSS in <p> tag

p {
  text-align: center; /* here */
}

Example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background-image: url("https://picsum.photos/1000/1000");
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  background-position-y: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height:100%;
  margin: 0;
  padding: 0;
}
.overlay {
  box-shadow: inset 0 0px 0 1000px rgba(0, 0, 0, 0.6);
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;  
  justify-content: center; /* Added */
  align-items: center; /* Added */
}

.text {
  font-family: Arial, sans-serif;
  background-color: rgba(0, 0, 0, 0.0);
  color: #ffffff;
  display: flex; /* here */
  flex-direction: column; /* here */
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 60px;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  text-align: center; /* here */
  font-size: 18px;
  margin-bottom: 20px;
}

<!-- language: lang-html -->

<div class="overlay">
  <div class="text">
    <h1>Quintillion AI</h1>
    <h2>Coming soon</h2>
    <p>
      We are currently in stealth mode, building AI Assistants for the future of work.
      <br>Please check back soon for updates.
    </p>
  </div>
</div>

<!-- end snippet -->