Flexbox属性误作用于文本而非容器：温度转换器布局求助

你的问题出在flex布局的应用层级不对：你给#title自身加了flex属性，但要让容器在页面中定位，应该给它的父元素（也就是<body>）设置flex布局，这样才能控制#title的位置。

修改后的CSS代码 #

body {
  margin: 0; /* 清除body默认外边距，避免顶部留白 */
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center; /* 让子元素水平居中 */
}

#title {
  background-color: lightgray;
  font-family: arial;
  text-align: center; /* 容器内文本水平居中 */
  line-height: 100px; /* 配合height让文本垂直居中 */
  height: 100px;
  max-width: 400px;
  width: 100%; /* 可选：让容器在max-width范围内占满宽度 */
}

修改后的HTML代码（移除多余换行标签） #

<!DOCTYPE html>
<html>
    <head>
        <title>Temperature Converter</title>
        <link rel="stylesheet" href="temperatureConverter.css">
    </head>

    <body>
        <div id="title">Temperature Converter</div>
    </body>
</html>

关键说明 #

• 给<body>设置display: flex后，它成为flex容器，#title作为子元素，可通过容器的align-items实现水平居中。
• flex-direction: column让容器内元素沿垂直方向排列，#title会默认处于页面顶部（垂直起始位置）。
• 清除body默认外边距是为了避免容器顶部出现不必要的留白。
• 用line-height匹配height的方式，比在容器内部用flex更简单地实现文本垂直居中。

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