当为元素设置 width: fit-content 等非 100% 宽度时，其默认表现为左对齐块级元素；需配合 margin: 0 auto 才能实现真正的水平居中。
当为元素设置 `width: fit-content` 等非 100% 宽度时，其默认表现为左对齐块级元素；需配合 `margin: 0 auto` 才能实现真正的水平居中。
在 CSS 布局中，一个常见的误区是认为 text-align: center 能使块级元素（如 <div>）自身居中——实际上，它仅控制<strong>内部行内内容</strong>的对齐方式，对块容器自身的定位无效。<p>要让 <code>.titulo 这类设置了明确宽度（如 fit-content、max-content 或固定值如 280px）的 <div> 水平居中，关键在于使用外边距自动分配机制：<pre class="brush:php;toolbar:false;">.titulo {
text-align: center; /* 居中内部文字 */
color: #f540ec;
font-size: 30px;
padding: 30px;
background-color: lightblue;
width: fit-content; /* 宽度收缩至内容尺寸 */
margin: 0 auto; /* 左右外边距设为 auto，触发浏览器自动均分剩余空间 */
}</pre>
<p>✅ <strong>原理说明</strong>： </p>
<ul>
<li>
<code>margin: 0 auto 等价于 margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
auto）且为块级元素时，margin-left 和 margin-right 同时设为 auto，浏览器会将其在父容器中水平居中对齐。⚠️ 注意事项：
- 此方法要求元素不能是行内元素（如
span），若需居中行内元素，请先设display: inline-block或改用 Flexbox； - 父容器需有明确宽度（如
body默认为视口宽度，通常满足条件）； - 避免同时设置
float或position: absolute/fixed，否则margin: 0 auto将失效。
? 替代方案（现代推荐）：
若项目支持较新浏览器，也可使用 Flexbox 实现更稳健的居中：
body {
display: flex;
justify-content: center; /* 水平居中子项 */
/* 可选：align-items: center; —— 垂直居中（需注意 body 高度） */
}
.titulo {
/* 移除 width: fit-content 和 margin: 0 auto */
text-align: center;
color: #f540ec;
font-size: 30px;
padding: 30px;
background-color: lightblue;
}
总结：text-align: center ≠ 元素居中，margin: 0 auto 才是块级元素水平居中的黄金法则——只要宽度明确、文档流正常，它就可靠有效。
