如何在Flex布局中实现文本水平居中？嵌入式时钟布局求助

我正在学习Flexbox基础概念，用来实现一个嵌入式时钟布局，要求填满整个浏览器窗口。布局需求是：

• 以大字体突出显示当前时间和温度
• 底部显示其他城市信息
• 右侧显示天气预报

预期布局大致如下：

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

        PTC  49F  10C

我用Flexbox尝试实现时遇到了水平对齐问题：调整align-items属性对文本水平居中完全没用，文本一直左对齐（flex-start），改justify-content也没效果，在各级容器里设置align-items都无效。当前代码原型如下：

CSS代码 #

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

HTML代码 #

<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 -->

另外，我不局限于Flexbox，也想了解更优的布局方案。

1. 修复Flexbox水平对齐问题 #

核心问题是未给time_temp_container设置display: flex——只有声明为Flex容器的元素，flex-flow、align-items等属性才会生效。当前你的time_temp_container仅添加了Flex布局属性，但未标记为Flex容器，导致对齐设置完全无效。

修改后的time_temp_container需补充display: flex：

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

同时还有两个细节需要修正：

• 外层.box要填满窗口，必须确保html和body也设置了100%高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

• extras中的flex_flow是拼写错误，应为flex-flow，同样需要添加display: flex让内部元素垂直排列：

<div id='extras' name='extras' style='display: flex; flex-flow: column nowrap;'>

2. 更优布局建议 #

方案一：Flexbox分层布局（推荐） #

将整体拆分为左侧主内容区和右侧天气预报区，左侧再细分为顶部时钟显示区和底部城市信息区，结构清晰且自适应窗口：

<div class="clock-container">
  <!-- 左侧主内容 -->
  <div class="main-content">
    <div class="clock-display">
      <div id="time">07:58</div>
      <div id="temp">47F 8C</div>
    </div>
    <div class="city-info">
      <div id="city">SH 20:58 33F 1C</div>
    </div>
  </div>
  <!-- 右侧天气预报 -->
  <div class="weather-forecast">
    <div id="icon">icon</div>
    <div>08:00 76F</div>
    <div>09:00 78F</div>
    <!-- ... 其他预报项 -->
  </div>
</div>

对应CSS：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.clock-container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: stretch;
}

.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

.clock-display {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#time { font-size: 85pt; }
#temp { font-size: 70pt; }
.city-info { font-size: 40pt; }

.weather-forecast {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem;
}

方案二：Grid布局 #

如果需要更精确的区域比例划分，CSS Grid是合适的选择，可直接定义各区域的位置和大小：

.clock-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas:
    "decor main forecast"
    "city city forecast";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 3fr 1fr;
}

.clock-decor { grid-area: decor; }
.clock-display { grid-area: main; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.city-info { grid-area: city; display: flex; justify-content: center; align-items: center; }
.weather-forecast { grid-area: forecast; display: flex; flex-direction: column; }

内容的提问来源于stack exchange，提问作者Dennis