How can I center text horizontally in a flex layout?

I am following this item to get a handle on a flexbox layout. The idea is to prominently display the current time and temperature in very large font, with an alternate city displayed along the bottom, and forecasts to the right. This gives a rough idea (at least conceptually) of the desired look:

    ___    __   _  _   ___
   / _ \  / / _| || | / _ \
  | | | |/ /_(_) || || (_) |
  | | | | '_ \ |__   _> _ <
  | |_| | (_) |   | || (_) |
   \___/ \___(_)  |_| \___/           07:00  53F
                                      08:00  53F
                                      09:00  54F
 _____ __ ______    __ __  _____      10:00  55F
| ____/_ |  ____|  /_ /_ |/ ____|       etc...
| |__  | | |__      | || | |
|___ \ | |  __|     | || | |
 ___) || | |        | || | |____
|____/ |_|_|        |_||_|\_____|

        PTC  49F  10C

When completed, this layout will fully fill the client's browser window (the client being basically an embedded clock).

I am trying to do this with flexbox and I have run into difficulty with horizontal alignment. (The actual font used and font sizing will be controlled by javascript using auto-sizing logic.) It seems that none of my efforts to change align-items have any effect on horizontal alignment; the text always ends up aligning to the left (or, technically, flex-start). (I've also tried monkeying with justify-content in case my understanding of axes is confused. Of course, to no avail.) I've tried specifying align-items in each div, in only the top, and also in the subcontainers; there seems to be no effect. I have searched outside of this article too, and haven't found any clue as to what I've done wrong. Can you help me understand my error here?

This is what I have so far in my mockup:

.box {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
}

<div class='box' height:100%>
  <div id='time_temp_container' style='flex-flow: column nowrap;flex-grow: 1; font-size:30pt;align-items:center;'>
    <div id='time' name='time' style='font-size:85pt;'>
      07:58
    </div>    <!-- time -->
    <div id='temp' name='temp' style='font-size:70pt;'>
      47F 8C
    </div>    <!-- temp -->
    <div id='city' name='city' style='font-size:40pt;'>
      SH 20:58 33F 1C
    </div>    <!-- city -->
  </div>  <!-- time_temp_container -->
  <div id='extras' name='extras' style='flex_flow: column nowrap;'>
    <div id='icon' name='icon'>icon</div>
    <div>08:00 76F</div>
    <div>09:00 78F</div>
    <div>10:00 80F</div>
    <div>11:00 81F</div>
    <div>12:00 82F</div>
    <div>13:00 82F</div>
    <div>14:00 83F</div>
    <div>15:00 82F</div>
    <div>16:00 83F</div>
  </div>  <!-- extras -->
</div><!-- outer box -->

By the way, if you feel my approach could be improved, I'm eager to understand a better approach. I'm not stuck on flexbox; it just sounds to me like a good approach.

Solution

I would use text-align: center; to center the text

<div id='time_temp_container' style='flex-grow: 1; font-size: 30pt; text-align: center;'>

But if you want to use flexbox, you need to set display: flex; on the div. The rest of your styles will do the job.

<div id="time_temp_container" style="display: flex; flex-flow: column nowrap; flex-grow: 1; font-size: 30pt; align-items: center;">

I also prefer to use CSS-Tricks as a guide and reference on how to use flexbox.

Edit: flexboxfroggy.com is also a good place to get an understanding of flexboxes