本文详解 Flexbox 中 justify-content 和 align-items 的作用对象（容器 vs 子元素），指出常见误区，并提供多种可靠方案实现标题容器在页面中的水平垂直居中。
本文详解 flexbox 中 `justify-content` 和 `align-items` 的作用对象（容器 vs 子元素），指出常见误区，并提供多种可靠方案实现标题容器在页面中的水平垂直居中。
你遇到的问题非常典型：误将 Flexbox 布局属性施加在“既是容器又是唯一子项”的元素上，导致样式作用于文本内容本身，而非期望的容器定位。
在你的原始代码中：
div {
display: flex; /* 所有 div 变成 flex 容器 */
}
#title {
align-self: flex-start; /* ❌ 无效：#title 是容器，不是子项，align-self 对它无意义 */
justify-content: center; /* ✅ 有效但作用于其子项（即文本）→ 文本在容器内水平居中 */
height: 100px;
max-width: 400px;
background-color: lightgray;
text-align: center;
}
关键点在于：
-
justify-content控制容器内子项的主轴对齐（此处是文本）； -
align-self只对flex 子项生效，而#title本身是body的子元素，不是任何 flex 容器的子项——所以align-self完全被忽略； -
text-align: center虽能让文字居中，但它只影响行内内容布局，无法让整个#title容器在视口内居中。
✅ 正确解法：让父容器（如 body）成为 Flex 容器，#title 作为其子项参与布局。
方案一：用 body 作为 Flex 容器（推荐，简洁高效）
/* temperatureConverter.css */
body {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
margin: 0;
min-height: 100vh; /* 确保占满视口高度 */
background-color: #f8f9fa;
}
#title {
background-color: lightgray;
font-family: Arial, sans-serif;
padding: 1rem 2rem;
font-size: 1.8rem;
font-weight: bold;
border-radius: 4px;
}
<!-- HTML --> <div id="title">Temperature Converter</div>
✅ 效果：
#title容器整体在页面正中央，不依赖固定宽高，响应友好。
方案二：显式创建嵌套 Flex 容器（更可控，适合复杂布局）
.flex-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
#title {
background-color: lightgray;
font-family: Arial, sans-serif;
padding: 1rem 2rem;
text-align: center;
}
<div class="flex-center">
<div id="title">Temperature Converter</div>
</div>
其他轻量替代方案（非 Flexbox）
-
纯 CSS 水平居中（无垂直需求时）：
#title { width: fit-content; margin: 0 auto; /* 配合 width 生效 */ } -
语义化 +
text-align（仅限块级居中文字）：#title { text-align: center; /* 对块级元素内的文本生效 */ margin-top: 2rem; /* 手动控制垂直位置 */ }
⚠️ 注意事项：
-
justify-content/align-items永远作用于容器的直接子元素，不是容器自身； -
align-self必须写在子元素上，且其父元素需为display: flex； - 使用
min-height: 100vh替代height: 100vh，避免内容溢出时布局塌陷； - 避免全局
div { display: flex }—— 它会意外改变所有<div> 的行为，引发不可预知的布局问题。<p>总结：Flexbox 的核心是「容器-子项」关系。想居中一个元素？先确保它的<strong>父元素是 flex 容器</strong>，再通过 <code>justify-content和align-items控制该元素（子项）的位置。掌握这一原则，就能彻底避开“样式跑偏到文字上”的陷阱。
