Breaking a line with flexbox centering?

Question

I'm trying to vertically/horizontally center my Title with the Subtitle directly beneath it. Here was my attempt:

html, body, h1 {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>

As you can see, the subtitle is in the same line as the h1, I'm trying to get it to go beneath it. I've tried setting h1 to display: block; but that seems to not work when using display: flex on the container. Any help would be appreciated.

Answer 1

Set flex-direction: column on container

html, body, h1 {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>

Answer 2

Setting flex-direction to column is one solution. It's already provided in another answer.

In some cases, if flex-direction: row is preferred (or a necessity), you can add flex-wrap: wrap to the container and give the first item a 100% width, which forces the second item to the next line.

body, h1 {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-wrap: wrap;           /* NEW */
  align-content: center;     /* NEW */
  text-align: center;        /* NEW */
}

h1 { flex: 0 0 100%; }       /* NEW */

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>